官方文档
先来看一下官方文档对拦截器锁定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;
}
词不达意，不当之处欢迎留言。
