Angular 4中如何等待异步方法执行完毕再遍历forEach循环？

你遇到的问题很典型：Lodash的_.forEach是同步遍历方法，它不会等待每个迭代中的异步操作完成，直接用它调用myService.setUserInfo(user)会导致所有异步任务几乎同时触发，无法按顺序执行。下面给你两种简单有效的解决方案：

方法一：使用for...of循环 + async/await（最直观） #

这是目前处理串行异步任务最易读的方式，原生for...of循环天然支持await，能确保上一个异步操作完成后再执行下一个：

async function processPendingUsers() {
  // 遍历队列中的每个用户
  for (const user of this.pendingUsers.queue) {
    try {
      // 等待当前用户的setUserInfo操作完成
      await myService.setUserInfo(user);
      console.log(`用户${user.id}的信息设置完成`);
    } catch (err) {
      console.error(`设置用户${user.id}信息失败:`, err);
      // 可选：如果希望出错后继续执行下一个，就不要抛出错误；如果要终止整个队列，就执行throw err
      // throw err;
    }
  }
}

// 调用处理函数，别忘了捕获全局错误
processPendingUsers().catch(globalErr => {
  console.error('处理用户队列时发生全局错误:', globalErr);
});

方法二：使用Lodash的_.reduce实现串行异步 #

如果你更倾向于用Lodash的方法，可以利用_.reduce累积一个Promise链，让每个异步操作等待前一个完成后再执行：

async function processPendingUsers() {
  await _.reduce(this.pendingUsers.queue, async (previousTask, user) => {
    // 先等待上一个异步任务完成
    await previousTask;
    // 执行当前的异步操作并返回Promise，供下一次迭代等待
    return myService.setUserInfo(user);
  }, Promise.resolve()); // 初始值是一个已完成的Promise，启动整个异步链
}

processPendingUsers().catch(err => {
  console.error('处理用户队列失败:', err);
});

关键注意事项 #

• 确保myService.setUserInfo(user)返回Promise：如果这个方法是基于回调的，需要先把它包装成Promise，比如：

  // 包装回调风格的setUserInfo为Promise版本
  function setUserInfoAsync(user) {
    return new Promise((resolve, reject) => {
      myService.setUserInfo(user, (error) => {
        if (error) reject(error);
        else resolve();
      });
    });
  }
  

  之后在循环中使用await setUserInfoAsync(user)即可。

• 错误处理：上面的示例加入了try/catch或catch链，你可以根据业务需求决定出错后是继续执行后续任务，还是终止整个队列。

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