在请求拦截器中执行异步任务
下面我们看一个例子:由于安全原因,我们需要所有的请求都需要在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置为新获取的cookie
request.headers['token'] = loginRes
return request
})
.finally(() => {
// 解锁当前fly实例
fly.unlock()
})
} else {
request.headers['token'] = get('token')
}
}