JavaScript遍历数组时等待前一个函数响应再处理下一项

嘿，我懂你想要的效果——遍历数组时，得等当前item的异步操作（比如后端请求）完全结束，再接着处理下一个。你的代码现在的问题是：虽然用了async函数，但setTimeout是基于回调的异步操作，没有被await等待，所以for循环会一口气跑完所有迭代，先把所有START和FINISH都打印出来，等2.5秒后才批量输出....waiting....。

要实现“串行等待”的预期效果，我们需要把setTimeout包装成返回Promise的函数，然后在循环里用await等待这个Promise完成。这样每次迭代都会等当前的异步操作结束，再进入下一轮循环。

修复后的完整代码示例 #

let lista = [1,2,3,4]
console.log('Iteracion de la lista')

// 把setTimeout封装成返回Promise的函数，让它能被await等待
function delay(item) {
  return new Promise(resolve => {
    setTimeout(function(){
      console.log('....waiting.... for : ' + item );
      resolve(); // 异步操作完成后触发resolve，告诉await可以继续执行了
    }, 2500);
  })
}

async function procesarLista(array){
  for(const item of array){
    console.log('-->START indice: ' + item)
    // 等待当前的异步延迟完成，再往下走
    await delay(item);
    console.log('-->FINISH indice: ' + item)
  }
}

// 调用异步函数
procesarLista(lista);

预期输出顺序 #

运行这段代码后，你会看到符合预期的串行执行效果：

Iteracion de la lista
-->START indice: 1
....waiting.... for : 1
-->FINISH indice: 1
-->START indice: 2
....waiting.... for : 2
-->FINISH indice: 2
-->START indice: 3
....waiting.... for : 3
-->FINISH indice: 3
-->START indice: 4
....waiting.... for : 4
-->FINISH indice: 4

扩展到真实后端请求场景 #

如果你的实际需求是调用后端接口（比如用fetch或axios），逻辑完全一致——因为这些请求API本身就返回Promise，直接在循环里await即可：

async function procesarLista(array){
  for(const item of array){
    console.log('-->START indice: ' + item)
    // 假设fetchDatos是调用后端的函数，返回Promise
    await fetchDatos(item);
    console.log('-->FINISH indice: ' + item)
  }
}

这样就能完美实现“等待前一个函数响应后再处理下一项”的需求啦！

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