已经是最新一篇文章了！
已经是最后一篇文章了！
自定义微信小程序flyio响应拦截
本文通过实现fly的拦截器，实现自动发送身份验证凭证跟自动错误处理。
整体设计思路请参见RESTFUL错误返回设计
flyio 介绍
fly.js是一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
flyio官网
在mpvue中引入fly
由于本人项目是mpvue框架，所以这里说明的是mpvue的导入方式，如果你使用的是其它框架，请参考flyio官方说明。
使用npm安装fly.js
npm install flyio --save
调用fly
通过npm安装的软件统一安装在了node_modules里面，可以使用以下代码调用fly对象。
var Fly = require("flyio/dist/npm/wx");
var fly = new Fly();
编写request.js工具类
这个工具类主要就是实现了两个拦截器，请求拦截跟响应拦截。请求拦截主要是在头部添加了统一的登录凭证access_token，响应拦截主要是向用户提示错误信息，并记录到本地storage。
var Fly = require("flyio/dist/npm/wx");
var fly = new Fly();
const host = 'http://10.11.15.43:81/ihu/public'
// 添加请求拦截器
fly.interceptors.request.use((request) => {
try {
var loginStatus = wx.getStorageSync("login_status");
// 在头部添加access_token
request.headers["Authorization"] = "Bearer " + loginStatus.access_token
} catch(err){
}
wx.showLoading({
title: '加载中',
mask: true
})
return request
})
// 添加响应拦截器
fly.interceptors.response.use(
(response) => {
wx.hideLoading()
return response; // http code == 200时，请求成功之后将返回值返回
},
// http ！= 200时，向用户输出错误信息，并记录日志
(err) => {
wx.hideLoading();
console.log(err.response.data);
wx.showToast({
title: err.response.data.error_message,
icon: 'none',
duration: 3000
});
}
)
fly.config.baseURL = host
export default fly
这段代码仍然不够完善，在响应拦截那里，并没有把错误信息记录下来，只是向用户提示了错误信息。
使用request.js
因为fly支持promise，所以示例代码里使用了async … await … 这样的同步请求写法。
// 注意这里的相对地址，在我的项目中
// request.js位于 /src/utils/request.js
// 示例代码位于 /src/pages/my/index.vue
import fly from "../../utils/request";
async uploadDrugPlan() {
var drugPlan = wx.getStorageSync("drug_plan");
if (drugPlan) {
try {
await fly.post("/drug-used-plan/upload", {
drug_plan: JSON.stringify(drugPlan)
});
wx.showToast({
title: "上传成功"
});
} catch (error) {}
} else {
wx.showToast({
title: "本地暂无计划",
icon: "none"
});
}
}
