mpvue中使用flyjs全局拦截的实现代码

发布时间：2020-12-16 23:35:24 所属栏目：百科来源：网络整理

导读：我们安装好flyio之后找到src目录下的main.js文件首先引入flyjs并实例化比方说我们每次请求我们自己的服务器接口的时候需要带上appID，用户登陆后需要带上openId { request.body.appId = 'xxx' // 用户的openId在获取之后添加到全局变量中如果存在，我们将

我们安装好flyio之后

找到src目录下的main.js文件

首先引入flyjs并实例化

比方说我们每次请求我们自己的服务器接口的时候需要带上appID，用户登陆后需要带上openId

{

request.body.appId = 'xxx'
// 用户的openId在获取之后添加到全局变量中如果存在，我们将它添加到请求参数里面
let openId = Vue.prototype.globalData.openId;
if(openId){
request.body.openId = openId
}
})

当服务器发生错误，或者用户网络错误导致请求失败的时候，我们可以添加一个响应拦截

{

},(err) => {
//发生网络错误后会走到这里
//return Promise.resolve("ssss")
wx.hideLoading();
wx.showToast({
title:'网络不流畅，请稍后再试！',icon:'none',});

})

最后将flyjs挂载到vue的原型上

不同页面直接使用this.$flyio请求（是不是很方便）

示例：

fly里面的拦截机制还是很强大的，并且在错误返回信息做了优化处理，在fly拦截器中支持执行异步任务，就是说在请求数据的时候如果拦截到token不存在那么我们就可以在拦截器中重新获取token，再接着执行之前的请求。

fly.interceptors.request.use((request) => {
//给所有请求添加自定义header
if (api.Get('token')) {
request.timeout = 30000,request.headers = {
"content-type": "application/json","cld.stats.page_entry": api.Get('scene'),"version": store.state.version,"token": api.Get('token')
}
wx.showLoading({
title: "加载中",mask: true,});
return request;
} else {
fly.lock();//锁住请求
return Public.Load().then(res => {
request.timeout = 30000,request.headers = {
"content-type": "application/json","token": api.Get('token')
}
wx.showLoading({
title: "加载中",});
//等待token返回之后在解锁，
fly.unlock();
return request;//继续之前的请求，
})
}
})

fly.interceptors.response.use(
(response) => {
wx.hideLoading();
return response
},(err) => {
wx.hideLoading();
if (err.status == 0) {
return "网络连接异常"
} else if (err.status == 1) {
return "网络连接超时"
} else if (err.status == 401) {
return "用户未登录"
} else {
if (err.response.data.message) {
return err.response.data.message
} else {
return '请求数据失败,请稍后再试'
}
};
// Do something with response error
}
)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!