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