如何等待多个异步函数执行完成？

嗨，这问题我太熟了！在JavaScript里处理并行异步任务，最常用也最干净的办法就是利用Promise API，我给你分情况讲清楚：

1. 要求所有任务都成功才继续（快速失败模式） #

如果你的异步函数都是返回Promise的（比如async函数本身就会自动返回Promise），直接用Promise.all()就搞定啦！它会并行执行所有传入的Promise，只有当全部都成功时才会resolve，一旦有任何一个失败，就会立刻抛出对应的错误。

举个实际例子：

// 假设你有几个异步任务函数
async function fetchUserInfo() {
  return await fetch('/api/user').then(res => res.json());
}

async function fetchUserPosts() {
  return await fetch('/api/posts').then(res => res.json());
}

async function fetchUserComments() {
  return await fetch('/api/comments').then(res => res.json());
}

// 等待所有任务完成的主函数
async function loadAllUserData() {
  try {
    // 把所有异步任务放进数组，传给Promise.all
    const [userInfo, userPosts, userComments] = await Promise.all([
      fetchUserInfo(),
      fetchUserPosts(),
      fetchUserComments()
    ]);
    
    // 所有任务都成功完成后，这里就可以放心使用结果啦
    console.log('用户信息：', userInfo);
    console.log('用户文章：', userPosts);
    console.log('用户评论：', userComments);
  } catch (error) {
    // 只要有一个任务失败，就会走到这里
    console.error('加载数据时出错：', error);
  }
}

// 调用执行
loadAllUserData();

2. 不管任务成败，都要等所有任务执行完毕 #

如果你的场景里，哪怕个别任务失败，也需要等所有任务都跑完再处理，那Promise.allSettled()就是最佳选择。它会等待所有Promise都完成（不管是fulfilled还是rejected），然后返回一个结果数组，每个结果对象会告诉你对应的任务是成功还是失败，以及对应的结果或错误原因。

示例代码：

async function handleAllTasks() {
  const taskResults = await Promise.allSettled([
    fetchUserInfo(),
    fetchUserPosts(),
    fetchUserComments()
  ]);
  
  // 逐个处理每个任务的结果
  taskResults.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`第${index+1}个任务成功：`, result.value);
    } else {
      console.log(`第${index+1}个任务失败：`, result.reason);
    }
  });
  
  // 到这里所有任务都已经执行完毕了，放心继续后续逻辑
}

小补充 #

如果你的异步任务不是Promise形式（比如老的回调式函数），可以先把它包装成Promise：

• Node.js里可以用util.promisify()工具函数
• 浏览器里可以手动封装，比如：

function callbackBasedTask(callback) {
  // 老的回调逻辑
  setTimeout(() => callback(null, '任务结果'), 1000);
}

// 手动封装成Promise
const promiseBasedTask = () => new Promise((resolve, reject) => {
  callbackBasedTask((err, data) => {
    if (err) reject(err);
    else resolve(data);
  });
});

// 之后就可以用上面的Promise.all/allSettled来处理啦

总结一下：根据你的需求选对应的API就行，这俩都是ES标准里的API，现代浏览器和Node.js都支持，写法简洁又清晰！

内容来源于stack exchange