Concurrency merge laboratory

五次调用，
一次执行。

点击一次按钮会同时调用 5 次。
singlePromise 只让原函数执行 1 次，其余 4 次等待并共享同一个结果。

Live request router

准备就绪

5 次调用进入 → 1 次原函数执行

它是怎么工作的

CALL调用进入包装函数

→

CACHE?先检查结果缓存

→

PENDING?再检查执行中 Promise

→

RUN必要时执行原函数

→

RESULT向所有调用分发结果

每个调用收到的结果

点击“并发调用 5 次”，观察五条调用如何共享一次真实执行。

实际执行通道 IDLE

等待实验 页面会直接使用 === 比较 Promise 对象。 点击并发调用查看结论。

Runnable pattern

实例代码

上方动画对应的最小实现。前两个调用发生在响应前，因此返回同一个 Promise；响应完成后，在缓存有效期内再次调用会直接使用缓存结果。

绿色数值会与实验控制中的滑块同步。

JavaScriptsingle-promises

import { singlePromise } from 'single-promises'

const request = () => new Promise((resolve) => {
  setTimeout(() => resolve(Date.now()), 1200)
})

const getData = singlePromise(request, {
  cache: 3000,
})

const p1 = getData()
const p2 = getData()

console.log(p1 === p2) // true：p1 还未响应，共用同一个 Promise

await p1
await getData()      // 缓存有效期内，使用缓存结果

getData.clear()       // 清除缓存，下次重新执行 request

五次调用，一次执行。

它是怎么工作的

每个调用收到的结果

实例代码

五次调用，
一次执行。