如何在循环中实现文件数组的Axios逐个同步下载？

你当前用forEach遍历异步函数的问题在于，forEach不会等待每个async回调执行完毕，所有的网络请求和文件写入会被同时触发，导致并行下载。要实现按序逐个下载，可以用以下两种方法：

方法一：使用for...of循环 #

这是最直观的方案，for...of会等待每次循环中的异步操作完成后，再进入下一次循环：

const axios = require('axios');
const { writeFile } = require('fs').promises;

const arrUrl = [
   'http://server.domain/path/file1.jpg',
   'http://server.domain/path/file2.jpg',
   'http://server.domain/path/file3.jpg', 
];

async function downloadFilesSequentially() {
  for (const [index, url] of arrUrl.entries()) {
    const response = await axios({ responseType: 'stream' }).get(url);
    await writeFile(`./files/${index}`, response.data);
    console.log(`已完成下载：${url}`);
  }
}

downloadFilesSequentially();

把下载逻辑封装在async函数里，用for...of结合entries()遍历数组获取索引，每次循环都会等待axios.get和writeFile完成后，才处理下一个URL。

方法二：使用Array.reduce串联异步操作 #

利用reduce把多个异步任务串联成链式Promise，前一个任务完成后再执行下一个：

const axios = require('axios');
const { writeFile } = require('fs').promises;

const arrUrl = [
   'http://server.domain/path/file1.jpg',
   'http://server.domain/path/file2.jpg',
   'http://server.domain/path/file3.jpg', 
];

arrUrl.reduce(async (prevPromise, url, index) => {
  // 等待前一个下载任务完成
  await prevPromise;
  // 执行当前下载逻辑
  const response = await axios({ responseType: 'stream' }).get(url);
  await writeFile(`./files/${index}`, response.data);
  console.log(`已完成下载：${url}`);
}, Promise.resolve()); // 初始传入已完成的Promise，启动链式调用

reduce的初始值是一个已resolved的Promise，每次迭代都等待上一次的Promise完成，再执行当前的下载操作，以此实现严格的顺序执行。

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