如何在forEach循环中正确使用async-await调用API逐个更新Todo？

问题根源 #

forEach 的设计逻辑是同步遍历数组，它不会等待回调函数中的异步操作完成。当你给 forEach 传入 async 回调时，每个回调会立即执行并发起请求，所有请求会几乎同时发送，无法实现逐个顺序更新的需求，而且你也无法统一等待所有异步操作完成，错误处理也会变得混乱。

解决方法 #

方法1：使用for...of循环（推荐，实现顺序逐个更新）

for...of 会等待每个异步操作完成后，再进入下一次循环，完美符合你逐个更新的需求，同时也方便处理错误：

async function updateSelectedTodos() {
  for (const todo of selectedTodos) {
    try {
      const { data } = await axios.put(`${API_URL}/todo/${todo.todoID}`, {
        completed: true
      });
      console.log(`Todo ${todo.todoID}更新成功`, data);
    } catch (error) {
      console.error(`Todo ${todo.todoID}更新失败`, error);
      // 可选：遇到失败就中断后续更新，取消注释下面一行
      // throw error;
      // 可选：跳过失败继续更新剩下的，保持默认continue逻辑即可
      continue;
    }
  }
}

// 调用更新函数
updateSelectedTodos();

方法2：使用Promise.allSettled（并行更新，等待所有操作完成）

如果后端允许同时发起多个请求，不需要严格的更新顺序，可以用这种方式一次性发起所有请求，然后等待所有操作完成（无论成功失败）：

async function updateSelectedTodos() {
  // 把每个更新请求包装成Promise，单独处理成功/失败
  const updateTasks = selectedTodos.map(todo => {
    return axios.put(`${API_URL}/todo/${todo.todoID}`, { completed: true })
      .then(res => ({
        todoID: todo.todoID,
        success: true,
        data: res.data
      }))
      .catch(err => ({
        todoID: todo.todoID,
        success: false,
        error: err.message
      }));
  });

  // 等待所有Promise完成，无论成功或失败
  const results = await Promise.allSettled(updateTasks);

  // 遍历结果做后续处理
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log(`Todo ${result.value.todoID}更新成功`, result.value.data);
    } else {
      console.error(`Todo ${result.value.todoID}更新失败`, result.value.error);
    }
  });
}

updateSelectedTodos();

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