mpvue中,fly请求拦截
在小程序项目中,通常需要在请求header中带上token,以识别用户身份,每一个请求都去做判断处理十分的麻烦,因此想到了用flyio,fly和axios十分相似,但是axios并不能在小程序中使用,因此还是选择了fly。fly里面的拦截机制还是很强大的,并且在错误返回信息做了优化处理,在fly拦截器中支持执行异步任务,就是说在请求数据的时候如果拦截到token不存在那么我们就可以在拦截器中重..
·
在小程序项目中,通常需要在请求header中带上token,以识别用户身份,每一个请求都去做判断处理十分的麻烦,因此想到了用flyio,fly和axios十分相似,但是axios并不能在小程序中使用,因此还是选择了fly。
fly里面的拦截机制还是很强大的,并且在错误返回信息做了优化处理,在fly拦截器中支持执行异步任务,就是说在请求数据的时候如果拦截到token不存在那么我们就可以在拦截器中重新获取token,再接着执行之前的请求。
const Fly = require("flyio/dist/npm/wx")
const fly = new Fly
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,
});
return request;
} else {
fly.lock();//锁住请求
return Public.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();
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
}
)
更多推荐
已为社区贡献3条内容
所有评论(0)