如何按顺序执行内部包含async方法的函数数组？

嘿，这个问题我之前也踩过坑，一开始直接用循环跑，结果异步操作全堆在一起执行，完全不是想要的顺序。咱们一步步来解决它～

首先得明确核心问题：你的函数本身不是async函数，但内部有异步逻辑（比如setTimeout、fetch或者回调式的异步操作）。如果直接用forEach或者普通for循环不做处理，这些函数会被立即调用，它们内部的异步操作会并行执行，根本不会按顺序等待上一个完成再执行下一个。

解决的关键在于：让每个函数的执行能被“等待”，也就是让每个函数返回一个Promise，这样我们就能用await来等待它内部的异步操作完成，再执行下一个函数。

情况1：可以修改原函数，让它返回Promise #

如果有权限修改这些函数，最简单的方式就是让它们返回内部异步操作的Promise链。举个例子：

原函数（有问题的版本） #

function fetchData1() {
  // 内部有异步操作，但没返回Promise
  fetch('/api/data1')
    .then(res => res.json())
    .then(data => console.log('数据1获取完成'));
}

修改后返回Promise的版本 #

function fetchData1() {
  // 返回fetch的Promise链，这样外部可以await它
  return fetch('/api/data1')
    .then(res => res.json())
    .then(data => {
      console.log('数据1获取完成');
      return data; // 可选：把结果传递给后续逻辑
    });
}

// 同理修改其他函数
function fetchData2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('定时器任务2完成');
      resolve();
    }, 1000);
  });
}

编写顺序执行函数 #

接下来写一个接收函数数组的async函数，用for...of循环逐个执行并等待：

async function executeInOrder(funcArray) {
  for (const func of funcArray) {
    await func(); // 等待当前函数的异步操作完全完成，再执行下一个
  }
  console.log('所有函数都按顺序执行完毕啦！');
}

// 使用示例
const taskList = [fetchData1, fetchData2, fetchData3];
executeInOrder(taskList);

为什么用for...of而不是forEach？因为forEach不支持await，它会一次性把所有函数都调用，根本不会等待异步操作完成，达不到顺序执行的效果。

情况2：不能修改原函数，用Promise包装 #

如果没法修改原函数（比如是第三方库的函数，或者项目限制），那我们可以写一个包装函数，把原函数转换成返回Promise的版本。比如原函数是回调式的：

原回调式函数 #

function oldTask1(callback) {
  setTimeout(() => {
    console.log('旧任务1完成');
    callback(null, '任务1结果');
  }, 1500);
}

function oldTask2(callback) {
  // 模拟可能出错的异步操作
  setTimeout(() => {
    const success = Math.random() > 0.3;
    if (success) {
      console.log('旧任务2完成');
      callback(null, '任务2结果');
    } else {
      callback(new Error('任务2失败'), null);
    }
  }, 1000);
}

包装函数 #

function wrapCallbackFunc(func) {
  return () => new Promise((resolve, reject) => {
    func((err, result) => {
      if (err) {
        reject(err); // 把错误传递出去
      } else {
        resolve(result); // 把结果传递出去
      }
    });
  });
}

// 把所有原函数包装成返回Promise的函数
const wrappedTasks = [oldTask1, oldTask2].map(wrapCallbackFunc);

同样用顺序执行函数 #

直接用上面的executeInOrder函数就能按顺序执行了：

executeInOrder(wrappedTasks)
  .catch(err => console.error('执行出错:', err)); // 统一捕获错误

总结一下核心步骤 #

• 确保每个函数（或包装后的函数）返回一个Promise，代表其内部异步操作的完成状态。
• 使用async函数配合for...of循环，通过await逐个等待函数执行完成，再进入下一个迭代。

这样就能完美实现按顺序执行你的函数数组啦！

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