一道面试题联想到请求拦截器和取消请求的实现

发表于

背景

来自一道同事的面试题，如下：

有一个 函数数组，里面可能是同步，也可能是异步的 Promise，怎么保持顺序执行并且让前一个函数的返回值作为后一个函数执行的参数。

理解了下就是一个异步函数数组要顺序执行，当时想了下答案，基于 Promise 的链式调用，所以没直接递归而是通过 while 循环来实现，代码大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 任务列表
const fnList = [
    () => 1,
    p => Promise.resolve(p + 1),
    p => p + 2,
    p => Promise.resolve(p + 3),
    p => Promise.resolve(p + 4),
    p => p + 5,
    p => p
];

let preResult;
while (fnList.length > 0) {
    const curFn = fnList.shift();
    if (preResult) {
        preResult = preResult.then((res) => {
            console.log(res);
            return curFn(res);
        });
    } else {
        // 首次调用无参数
        preResult = Promise.resolve(curFn());
    }
}

输出结果： 1 2 4 7 11 16

vue resource / axios 拦截器实现

这里和拦截器的实现有什么关系呢 ？

后面想为什么第一思维会这样去解题，明显和以前看 vue resource 的源码有关系，这里和在拦截器代码实现是如出一辙。

想想实现拦截器是不是也是这样，就是在你的http请求前或者是response返回数据之后对你的请求参数或者返回数据做加工处理，如下图：

graph LR

start(调用http方法)--> ReqInterceptors(request拦截器)
requestEnd(请求成功) --> response
response(返回数据) --> response数据

subgraph Request
    ReqInterceptors-->sendRequest(sendRequest发送请求Promise)
    sendRequest--> requestEnd
end

subgraph Response
    response数据--> response拦截器
end

上面整个流程连起来看，从 request 到 response 是不是就是和最开始的题目是一样的，一个同步异步混合的任务队列需要依次执行。

提示：实际场景中上图 request拦截器 response拦截器 可以添加多次

这里整理了基于 vue resource 的一个http库，移除对Vue特殊处理的部分代码，添加了 Service 类来封装 http请求，对源码做了较为详细的注释，源码地址：lljj/http

axios 取消请求

聊到异步请求那必须想到 axios，顺便回忆了下取消请求，首先 Promise 本生是并不支持取消的，曾经有过提案也没通过，这里不做延伸。

另外关于取消请求，会想到 fetch 方法支持通过 AbortController 来做请求取消，axios 的取消使用方法和这里使用类似，如果基于 polyfill 的实现应该也是一个原理了。

先看使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 调用 CancelToken.source() 返回一个对象包含 token 和 cancel 两个成员
const source = CancelToken.source();

// 传递 cancelToken 给 http 方法
// source.token包含一个 Promise 实例
http({
    ...,
    url: '/getUserInfo',
    cancelToken: source.token
})

// 取消请求
source.cancel();

axios 核心实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
class CancelToken {
    constructor(executor) {
        if (typeof executor !== 'function') {
            throw new TypeError('executor must be a function.');
        }

        // 通过该 promise 来监听取消操作
        let resolvePromise;
        this.promise = new Promise((resolve) => {
            resolvePromise = resolve;
        });

        // 取消
        executor(() => {
            resolvePromise();
        });
    }

    /**
     * 返回对象包含当前的取消方法和一个 CancelToken 的实例
     * @returns {{token: CancelToken, cancel: *}}
     */
    static source() {
        let cancel;
        const token = new CancelToken((c) => {
            cancel = c;
        });

        return {
            token,
            cancel
        };
    }
}

// 添加内部取消辑请求调用如下逻辑：
// 判断是否传入 cancelToken 参数
// cancelToken 为执行 CancelToken.source() 方法的返回值，内部包含 token 和 cancel
//  - token： 包含一个 promise 实例，只是它的状态由 cancel 方法来控制，
//  - cancel： 其实就是执行了 promise 的 resolve方法， 执行后 promise 状态变为 fulfilled
// 所以需要执行取消只用去 promise.then(() => { xx.abort() });

if (request.cancelToken) {
    request.cancelToken.promise.then(() => {
        // 取消请求
        request.abort();
    });
}

这里的取消请求实现还是挺机智的

基于Promise状态机应用的一些联想

如上 Promise 对这样需要关注状态的场景，是一种很方便的解决方案

比如：
一个基于 WebSocket 的发送消息，在发送消息之前可能并未成功连接服务，那常规的方法，如果未成功建立连接前用户点击了发送消息，通过一个队列来保存未连接时发送的消息，连接之后再去检查队列，发送那些连接前的消息。

如果使用 Promise 那可以变得更加简单，本质上 Promise 的实现也是如此，下次手写一个 a+ 规范的 Promise 吧（整理了一些手写Promise代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class Msg {
    connection() {
        return new Promise(resovle => {
            if (this.connected) return resovle();
        
            this.ws = new WebSocket('wss://echo.websocket.org');
            this.ws.onopen = () => { 
                console.log("Connection open ...");
                this.connected = true; 
                resovle();
            };
        })
    }

    sendMsg(msg) {
        return this.connection().then(() => {
            this.ws.send(msg);
        })
    }
}

例子只是伪代码，现实场景会更加复杂，需要考虑心跳包，断开重连等等…