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置为新获取的cookie
        request.headers['token'] = loginRes
        return request
      })
      .finally(() => {
        // 解锁当前fly实例
        fly.unlock()
      })
  } else {
    request.headers['token'] = get('token')
  }
}