如何仅使用Promises实现数组元素的串行Fetch请求？

完全可以只用原生Promise实现串行请求，不用递归也能写出更简洁易维护的代码，下面提供两种常用方案：

方案一：利用Array.prototype.reduce串联Promise #

这是实现串行Promise链的经典方式，借助reduce的累积特性，将每个请求依次衔接：

const words = "words to fetch from this array".split(' ');

// 模拟fetch请求逻辑
function fetchWord(word) {
  return new Promise((resolve) => {
    console.log(`模拟fetch调用: ${word}`);
    setTimeout(() => {
      resolve(`已完成: ${word}`);
    }, 1000);
  });
}

// 串行执行所有请求
words.reduce((prevPromise, currentWord) => {
  return prevPromise.then(() => fetchWord(currentWord));
}, Promise.resolve()); // 初始传入已resolved的Promise，启动整个调用链

原理：reduce的累积值始终是前一个请求的Promise，每次迭代都会等待前一个Promise完成后，再执行当前的fetch请求，自然形成串行执行的逻辑。

方案二：使用async/await（基于Promise的语法糖） #

如果运行环境支持ES2017+，用async/await可以写出更直观的串行代码，本质依然是Promise：

const words = "words to fetch from this array".split(' ');

function fetchWord(word) {
  return new Promise((resolve) => {
    console.log(`模拟fetch调用: ${word}`);
    setTimeout(() => {
      resolve(`已完成: ${word}`);
    }, 1000);
  });
}

async function serialFetch() {
  for (const word of words) {
    await fetchWord(word);
  }
}

serialFetch();

原理：await会暂停函数执行，直到当前fetch请求的Promise状态变为resolved，之后才会进入下一次循环，实现逐个执行的效果。

对比递归实现 #

你的递归方案是可行的，但上述两种写法无需手动管理递归调用的终止条件，代码结构更清晰，可读性和可维护性更强，也更符合现代JavaScript的编码习惯。

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