正文
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 = falseVue.prototype.$api = APIApp.mpType = 'app'const app = new Vue({
...App
})
app.$mount()
在页面里调用：
this.$api.get('xxx/xxx')
.then(res => {
// 处理响应结果
console.log(res)
})// 因为在请求封装里已经处理过响应失败的情况了，没有特殊情况可以不用catch
