如何将项目数组映射为Promise并按顺序等待执行？

嘿，这个需求很常见！想要摆脱命令式的for...of循环，用更函数式的风格实现串行异步请求，Array.prototype.reduce就是你的绝佳工具——它天生适合这种逐步累积结果、按顺序处理的场景。

核心实现思路 #

利用reduce将数组中的每个元素依次串联成Promise链：每一次迭代都等待前一个请求完成，再执行当前的fetchSomething，最后把结果累积到数组中。

基础代码示例 #

// 假设你的项目列表示例
const items = ['item1', 'item2', 'item3'];

// 函数式的串行请求实现
const fetchSequentially = async (items) => {
  return items.reduce(async (accumulatorPromise, currentItem) => {
    // 先等待上一轮的请求全部完成，拿到已累积的结果数组
    const results = await accumulatorPromise;
    // 执行当前请求，等待它完成
    const currentResult = await fetchSomething(currentItem);
    // 将新结果加入数组，返回给下一轮迭代
    return [...results, currentResult];
  }, Promise.resolve([])); // 初始值：一个已resolve的空数组Promise
};

// 使用方式
fetchSequentially(items)
  .then(finalResults => console.log('所有请求完成，结果：', finalResults))
  .catch(err => console.error('请求出错：', err));

代码解释 #

• 初始值Promise.resolve([])是一条已经成功的Promise，保证第一次迭代能正常启动。
• 每次迭代中，await accumulatorPromise会等待上一个请求（或者初始的空数组）完成，确保严格串行执行。
• 执行当前的fetchSomething后，把结果加入累积数组，返回新的Promise给下一轮迭代。

带错误处理的版本 #

如果需要处理单个请求失败的情况（不中断整个串行流程），可以在内部加入try/catch：

const fetchSequentiallyWithErrorHandling = async (items) => {
  return items.reduce(async (accPromise, item) => {
    const results = await accPromise;
    try {
      const result = await fetchSomething(item);
      results.push({ success: true, data: result, item });
    } catch (error) {
      // 可以选择记录错误，继续执行后续请求
      results.push({ success: false, error: error.message, item });
    }
    return results;
  }, Promise.resolve([]));
};

和其他方式的对比 #

• 对比for...of：reduce的方式是声明式的——你只需要描述“要把数组转化为串行请求的结果数组”，而不需要写循环的步骤，更符合函数式编程的理念。
• 对比Promise.all：Promise.all会一次性触发所有请求，而reduce实现的是严格串行，完全满足你“依次执行”的需求。

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