本文主要是介绍mpvue项目中基于flyio的拦截，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在请求拦截器中执行异步任务
下面我们看一个例子：由于安全原因，我们需要所有的请求都需要在header中设置一个csrfToken，如果csrfToken不存在时，我们需要先请求一个csrfToken，然后再发起网络请求，由于请求csrfToken是异步的，所以我们需要在拦截器中执行异步请求，代码如下：
不知道为什么 官方文档的tokenFly 和 newFly 不统一一下 其实就是一个东西 容易误导人
var csrfToken="";
var tokenFly=new Fly();
var fly=new Fly();
fly.interceptors.request.use(function (request) {log(`发起请求：path:${request.url}，baseURL:${request.baseURL}`)if (!csrfToken) {log("没有token，先请求token...");//锁定当天实例，后续请求会在拦截器外排队，详情见后面文档fly.lock();return tokenFly.get("/token").then((d) => {request.headers["csrfToken"] = csrfToken = d.data.data.token;log("token请求成功，值为: " + d.data.data.token);log(`继续完成请求：path:${request.url}，baseURL:${request.baseURL}`)return request; //只有最终返回request对象时，原来的请求才会继续}).finally(()=>{fly.unlock();//解锁后，会继续发起请求队列中的任务，详情见后面文档})} else {request.headers["csrfToken"] = csrfToken;}
})本人在mpvue 写拦截器
login
import Fly from 'flyio/dist/npm/wx'
import config from '../config'import {set, get} from '@/utils/storage'var fly = new Fly()
var tokenFly = new Fly()
var host = config.url
var token = get('token')
// token为空重新获取
function login () {return new Promise((resolve, reject) => {wx.login({success: function (res) {tokenFly.post('/xxx/xxxx', {js_code: res.code}).then(res => {console.log(res)set('token', res.data.stringData)resolve(res.data.stringData)})},fail: function (err) {reject(err)}})})
}// 添加请求拦截器
fly.interceptors.request.use(function (request) {if (token === '') {fly.lock()return login().then((loginRes) => {console.log(loginRes)// 将header中的cookie置为新获取的cookierequest.headers['token'] = loginResreturn request}).finally(() => {// 解锁当前fly实例fly.unlock()})} else {request.headers['token'] = get('token')}
}
这篇关于mpvue项目中基于flyio的拦截的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
