官方文档

先来看一下官方文档对拦截器锁定API的介绍

拦截器锁定API

请求拦截器和响应拦截器都提供了锁定自身的API， 拦截器锁定后，未进入到该拦截器的请求将在拦截器外面排队，暂停网络请求，直到拦截器解锁时，排队的请求才再次进入拦截器继续请求。请求拦截器和响应拦截器都提供了如下两个API:

lock()

锁定当前拦截器。

unlock

解锁当前拦截器。

Flyio的使用

import Fly from './fly';
export const service = new Fly();

// 业务请求service的请求拦截器 
// 参数:handler（下文中"拦截器操作"指handler）
service.interceptors.request.use((request) => {
    // doSomething...
    service.lock();
    // doSomething...
    return request  //只有最终返回request对象时，原来的请求才会继续
    service.unlock()
})

源码分析

Flyio的通过Promise实现锁定API，用Promise.then的同步执行模拟队列，以resolve为开关控制后续操作的执行。

下面通过笔者的注释一起读读相关代码吧~~

//在fly.js中，声明Fly对象，为对象添加请求方法及"lock", "unlock","clear"方法。

["get", "post", "put", "patch", "head", "delete"].forEach(e => {
  Fly.prototype[e] = function (url, data, option) {
    // 发起网络请求，调用Fly的request方法
    return this.request(url, data, utils.merge({method: e}, option))
  }
});

["lock", "unlock", "clear"].forEach(e => {
   // 使用请求锁，调用Fly的interceptors.request
  Fly.prototype[e] = function () {
    this.interceptors.request[e]();
  }
});

// Fly对象下的拦截器对象
let interceptors = this.interceptors = {
  //响应拦截器
  response: {
    use(handler, onerror) {
      this.handler = handler; //hander是拦截网络请求要执行的操作，简称"拦截器操作"
      this.onerror = onerror;
    }
    //后续会将lock等方法merge进response对象
  },
  //请求拦截器
  request: {
    use(handler) {
      this.handler = handler; 
    }
    //后续会将lock等方法merge进request对象
  }
}

// 把lock,unlock,clear合并到interceptor的requset,response对象中
let irq = interceptors.request;
let irp = interceptors.response;
// wrap函数merge这几个方法
wrap(irp);
wrap(irq);

function wrap(interceptor) {
    // 存储promise的resolve,reject
    let resolve;
    let reject;

    // 内部清除方法
    function _clear() {
        interceptor.p = resolve = reject = null;
    }

    // merge方法
    utils.merge(interceptor, {
        lock() {
            // resolve不存在，说明是首次使用lock锁，声明一个p存储锁队列
            // 用promise实现锁队列，把拦截器操作放到promise.then里
            // 将promise的_resolve, _reject赋值给上级变量，从外层控制resolve，只有resolve()后,Promise.then才能继续执行
            if (!resolve) {
                interceptor.p = new Promise((_resolve, _reject) => {
                    resolve = _resolve
                    reject = _reject;
                })
            }
        },
        unlock() {
            // resolve存在表示lock锁存在，resolve()释放整个promise，让后续网络请求执行
            if (resolve) {
                resolve()
                _clear();
            }
        },
        clear() {
            if (reject) {
                let ENV = process.env.NODE_ENV === 'development';
                if (ENV) reject("cancel");
                _clear();
            }
        }
    })
}

​以用户发起网络请求为例，当用户发起网络请求，进入Fly.request方法，方法内先调用enqueueIfLocked判断锁队列p (Promise) 是否存在，如果锁队列不存在，就执行拦截器操作（handler）；如果锁队列p存在，说明之前的网络请求拦截器已经lock了，当前的handler会被放入锁队列中,直到resolve()解锁再按照入队顺序执行。

request(url, data, options){
    let requestInterceptor = interceptors.request; //请求拦截
    let responseInterceptor = interceptors.response; //响应拦截
    let requestInterceptorHandler = requestInterceptor.handler; // 拦截器操作

    let promise = new Promise((resolve, reject) => {
        
        //调用enqueueIfLocked方法(如果锁队列p存在就将当前网络请求操作入队，否则直接执行)
        enqueueIfLocked(requestInterceptor.p, () => {
            // 省略：存储用户参数,请求头,url等信息到ret
            
            //执行拦截器操作
            if (requestInterceptorHandler) {
                ret = requestInterceptorHandler.call(requestInterceptor, options, Promise) || options;
            }

            //省略：网络拦截操作执行完毕后，调用makeRequest发送网络请求

        })

        /**
         *如果请求/响应拦截器已被锁定(service.locked)
         *新的请求/响应将进入一个队列，否则，它将被直接执行。
         *@param [promise]如果promise存在，意味着拦截器被锁定
         *@param [callback]
         */
        function enqueueIfLocked(promise, callback) {
            //判断当前是否存在锁队列,即p是否存在
            //如果锁队列存在，将拦截器操作放到promise的then里；如果不存在就执行拦截器操作
            if (promise) {
                promise.then(() => {
                    callback()
                })
            } else {
                callback()
            }
        }

    })

    promise.engine = engine; //Fly通过在不同环境切换不同engine的方式实现支持不同的javascript运行环境的。
    return promise;
}

词不达意，不当之处欢迎留言。