Promise合并的场景和实现

场景

  1. 当发起多个完全一样的请求时，可以将多个 promise 合并成一个。
  2. 多个任务，调用同一个promise函数时，promise如果在执行中，则合并成一个。

实现方法

本质上，当重复调用相同的promise时，如果这个promise在pending状态，则直接返回这个promise即可。

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
/**
 * 缓存在执行的promise
 */
let promise;
/**
 * 模拟异步任务执行
 */
function mockAsync(ms) {
    return new Promise(resolve => {
        setTimeout(() => {
            promise = null;
            resolve(true)
        }, ms)
    })
}
/**
 * 带有 promise 合流功能的异步任务
 */
async function mockAsyncProxy() {
    if (promise) {
        return await promise;
    }

    promise = mockAsync(100)
    return await promise;
}

测试之后的结果，确实是3个true组成一个数组：

1
2
3
4
5
6
7
8
9
async function main() {
    const allFns = []
    for (let i = 0; i < 3; ++i) {
        allFns.push(testFn())
    }
    const allRes = await Promise.all(allFns) // 返回 [true, true, true]
    return allRes
}
main()