mpvue中使用flyjs全局拦截的实现代码
我们安装好flyio之后
npminstallflyio
找到src目录下的main.js文件
首先引入flyjs并实例化
varFly=require("flyio/dist/npm/wx")
varfly=newFly
比方说我们每次请求我们自己的服务器接口的时候需要带上appID，用户登陆后需要带上openId
//请求拦截
fly.interceptors.request.use((request)=>{
request.body.appId='xxx'
//用户的openId在获取之后添加到全局变量中如果存在，我们将它添加到请求参数里面
letopenId=Vue.prototype.globalData.openId;
if(openId){
request.body.openId=openId
}
})
当服务器发生错误，或者用户网络错误导致请求失败的时候，我们可以添加一个响应拦截
//响应拦截
fly.interceptors.response.use(
(response)=>{
},
(err)=>{
//发生网络错误后会走到这里
//returnPromise.resolve("ssss")
wx.hideLoading();
wx.showToast({
title:'网络不流畅，请稍后再试！',
icon:'none',
});
})
最后将flyjs挂载到vue的原型上
//将fly挂载在Vue的原型上 Vue.prototype.$flyio=fly
不同页面直接使用this.$flyio请求（是不是很方便）
示例：
fly里面的拦截机制还是很强大的，并且在错误返回信息做了优化处理，在fly拦截器中支持执行异步任务，就是说在请求数据的时候如果拦截到token不存在那么我们就可以在拦截器中重新获取token，再接着执行之前的请求。
constFly=require("flyio/dist/npm/wx")
constfly=newFly
Vue.prototype.$http=fly;
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,
});
returnrequest;
}else{
fly.lock();//锁住请求
returnPublic.Load().then(res=>{
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,
});
//等待token返回之后在解锁，
fly.unlock();
returnrequest;//继续之前的请求，
})
}
})
fly.interceptors.response.use(
(response)=>{
wx.hideLoading();
returnresponse
},
(err)=>{
wx.hideLoading();
if(err.status==0){
return"网络连接异常"
}elseif(err.status==1){
return"网络连接超时"
}elseif(err.status==401){
return"用户未登录"
}else{
if(err.response.data.message){
returnerr.response.data.message
}else{
return'请求数据失败,请稍后再试'
}
};
//Dosomethingwithresponseerror
}
)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。