如何利用Async/Await实现JavaScript同步执行以顺序遍历URL数组？

你写的代码没法实现顺序执行的核心原因是：forEach（包括map）不会等待异步回调完成。它会一次性遍历完所有数组元素，每个async回调会立刻启动并进入await状态，所有请求几乎同时发起，属于并行执行，而非你需要的顺序等待。

正确解法1：使用for...of循环（最直观） #

这是实现顺序异步执行最简单的方式，for...of会等待每次循环内的await完成后，再进入下一轮循环：

const urls = [ 'https://url.com', 'https://url.com/difPage', 'https://url.com/difPage2' ]

async function processUrlsSequentially() {
  for (const url of urls) {
    const data = await performAsyncUrlFunction(url)
    // 这里可以添加对data的处理逻辑
    console.log(`处理完成：${url}`)
  }
}

processUrlsSequentially()

正确解法2：使用reduce构建Promise链 #

如果需要收集每个请求的结果，或者偏好函数式写法，可以用reduce来串联Promise：

const urls = [ 'https://url.com', 'https://url.com/difPage', 'https://url.com/difPage2' ]

// 用reduce构建顺序执行的Promise链
urls.reduce(async (previousTask, url) => {
  // 等待上一个请求完成
  await previousTask
  // 执行当前请求
  const data = await performAsyncUrlFunction(url)
  // 处理data或收集结果
  console.log(`处理完成：${url}`)
}, Promise.resolve()) // 初始Promise，确保第一次循环能正常执行

额外说明 #

• 不要试图用forEach或map实现顺序异步执行，它们的设计逻辑不支持等待回调完成，强行使用只会导致并行执行。
• 两种解法都依赖外层的async环境，确保await能正常工作。

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