如何在 forEach 循环内调用 async-await API 调用？

Question

我正在执行一项任务，需要一项一项更新待办事项列表。我正在选择一个待办事项列表，当我单击更新按钮时，它应该使用 forEach 循环逐个更新待办事项。如果选择待办事项，下面是列表

selectedTodos = [
{
todoID:630316783e09e69bda667e2e,
userID:630316783e09e69bda63dvft3,
completed:false
},
{
todoID:630316783e09e69bda667ssdw36,
userID:988765yk6783e09e69bda667e2e,
completed:false
},
{
todoID:630316783765gbjybda667e2e,
userID:630316783e09e69vfft567742,
completed:false
},
]

我正在使用forEach循环来迭代列表并逐一更新，如下所示

selectedTodos.forEach(async(todo)=>{

const {data} = await axios.put(API_URL+"/todo/"+ todo.todoID,{
completed:true
})
console.log(data)
})

这里的 async-await 不在循环内工作，但是当我单独更新它时，它正在工作。它不仅仅在forEach循环上工作。我没有一个端点可以一次更新所有内容。我需要循环遍历列表并一一更新。还有其他办法吗？

Answer 1

将代码转换为按预期工作的代码的最简单方法是替换

selectedTodos.forEach(async (todo) => {

和

await Promise.all(selectedTodos.map(async (todo) => {

假设您位于异步函数内。它的工作原理是 selectedTodos.map 返回一个 Promise 数组，Promise.all 等待它们全部解决后再继续。Promise 类下也有类似的方法。

经典之作

for(const todo of selectedTodos) {
  await actions
}

也有效。但如果您喜欢更多命令式代码，第一个示例是相同的