uniapp 基於 flyio 的 http 請求封裝

之前寫請求都是用別人封裝好的，直接 import request 完事，自己第一次寫還是一頭霧水，學習了一波搞清楚了些，可以寫簡單的封裝了。

首先要搞清楚為什么封裝請求，同其他的封裝一樣，我們把不同請求里相同的代碼抽離出來進行復用，提高編碼效率。比如根域名的配置，響應失敗的處理，token 的攜帶……這些是大多數請求都需要的，把它們封裝起來就可以避免寫重復的代碼。那么怎樣封裝呢？根域名配置可以單獨放在一個配置文件里，想用的時候引入一下就可以了；處理響應失敗和攜帶 token 則要分別用到響應攔截器和請求攔截器。下面來一一說明。

在開發時經常使用的 axios 在小程序里用不了，本文使用了類似的 flyio。Fly.js 是一個支持所有JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。文檔地址：https://wendux.github.io/dist/#/doc/flyio/readme

首先創建一個 config.js 文件存儲 baseurl：

let baseurl = ""

if (process.env.NODE_ENV === 'development') {
        // 本地
        baseurl = 'https://xxx'
    // 預發
    // baseurl = 'https://xxx'
    // 正式
    // baseurl = 'https://xxx'
    
} else {
    // 預發
    // baseurl = 'https://xxx'
    // 正式
    baseurl = 'https://xxx'
}

export default baseurl

再創建 api.js 文件進行請求封裝：

var Fly = require("./fly") //
var fly = new Fly; //創建fly實例
import baseurl from './config.js'

// 配置請求根域名
fly.config.baseURL = baseurl;

// 配置響應攔截器
fly.interceptors.response.use(
    (response) => {
            // 權限問題報錯
            if (response.data.retcode == 10003 || response.data.retcode == 10004 || response.data.retcode == 10011) {
                    uni.showModal({
                        title: '溫馨提示',
                        content: '無權限訪問或登錄信息已過期，請返回登錄頁重新登錄后重試!'
                    })
                return Promise.reject(response.data)
            } else if (response.data.retcode != 0) {
                uni.showModal({
                    title: '溫馨提示',
                    content: response.data.text,
                    showCancel: false
                })
                return Promise.reject(response.data)
            } else {
                //只將請求結果的data字段返回
                return Promise.resolve(response.data)
            }
    },
    (err) => {
        console.log(err, 'err')
        //發生網絡錯誤后會走到這里
            uni.showModal({
                title: '溫馨提示',
                content: "網絡請求異常：" + err.message
            })
        return Promise.reject("網絡請求異常：" + err.message)
    }
)
// 配置請求攔截器
fly.interceptors.request.use((request) => {
    // 請求頭攜帶token，不要問我token怎么來的
    request.headers["token"] = uni.getStorageSync('token');
    return request;
})

export default fly

在 main.js 文件里引入 api 並設置全局變量讓它能夠在全局調用：

import Vue from 'vue'
import App from './App'

import API from '@/common/api'

Vue.config.productionTip = false

Vue.prototype.$api = API


App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在頁面里調用：

this.$api.get('xxx/xxx')
    .then(res => {
        // 處理響應結果
        console.log(res)
    })

// 因為在請求封裝里已經處理過響應失敗的情況了，沒有特殊情況可以不用catch