如何保证异步函数第n次调用完成后才执行第n+1次调用？

问题背景 #

假设我们有以下代码：

const sleep = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

// myFunction 是网络请求、数据库查询等异步操作           
const myFunction = async (label) => {
  console.log("enter " + label);
  await sleep(500);
  console.log("leave " + label);
  return "return " + label;
}

// 在某事件处理函数中
var varA = myFunction("a");
// ... 处理 varA

// 在另一事件处理函数中
var varB = myFunction("b");
// ... 处理 varB

它的日志输出几乎必然是：

enter a
enter b
leave a
leave b

这是因为await仅为语法糖，并非真正阻塞线程，第二次调用会在第一次调用完成前就执行。

核心需求 #

如何保证myFunction的第n次调用完全执行完成后，才启动第n+1次调用？期望日志输出为：

enter a
leave a
enter b
leave b

• 是否有对应的设计模式？
• 是否有可用的库？（某Node.js包已无人维护）

注意：myFunction可能是无法修改的第三方库函数。

为什么直接用await myFunction无效 #

myFunction的调用可能出现在任意位置（比如点击事件处理函数），无法直接通过await myFunction控制顺序。我们需要保证调用按**先进先出（FIFO）**的顺序执行，先进入的调用先完成。

例如在点击事件中使用：

<button onClick="() => { var varA = myFunction('button a'); console.log(varA) }">hit me</button>

用户多次点击时，myFunction会在第一次调用返回前被多次触发，这时仅靠await无法控制执行顺序。

解决方案 #

1. 异步任务队列设计模式 #

核心思路是维护一个Promise队列，每次调用被包装后，都会等待队列中前一个任务完成再执行自身，完全不需要修改原myFunction的代码。

实现代码如下：

// 初始化队列：用一个已完成的Promise作为起点
let taskQueue = Promise.resolve();

// 包装原函数，实现串行执行
const serialMyFunction = async (...args) => {
  // 将当前任务加入队列：等待前序任务完成后，执行当前myFunction
  taskQueue = taskQueue.then(() => myFunction(...args)).catch(err => {
    // 捕获错误避免队列中断，可根据业务需求调整错误处理逻辑
    console.error('任务执行失败:', err);
    throw err; // 若不想中断后续任务，可移除throw语句
  });
  return taskQueue;
};

之后用serialMyFunction替代原myFunction调用即可：

// 在事件处理函数中调用
var varA = serialMyFunction("a");
var varB = serialMyFunction("b");

这样就能保证所有调用严格按顺序执行，日志会符合预期。

2. 可用工具库 #

如果不想手动实现，可选择成熟的异步控制库：

• p-queue：轻量级Promise队列库，支持自定义并发数（设置为1即可实现串行），维护活跃，文档详尽。
• async.js：老牌异步工具库，通过async.series或async.queue（设置concurrency: 1）可快速实现串行执行。

内容的提问来源于stack exchange，提问作者nCessity