如何用Promise.then替代await重写含循环的异步代码？

• 结论：完全可以实现，async/await本身就是基于Promise的语法糖，我们可以通过Promise链式调用模拟for循环中await的串行执行效果。

原代码的逻辑是：遍历数组，每等待1秒后输出一个0，所有操作按顺序串行执行，前一个延迟完成后才会执行下一次输出。

重写后的代码 #

let zeros = new Array(10000).fill(0);

// 通过reduce构建Promise串行链
zeros.reduce((currentPromise, zero) => {
  return currentPromise.then(() => {
    // 先等待1秒，再输出当前元素
    return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
      console.log(zero);
    });
  });
}, Promise.resolve()); // 用已完成的Promise作为链式调用的起点

代码解释 #

• 我们使用Array.reduce来累积Promise链：初始值是一个已resolve的空Promise(Promise.resolve())，作为链式调用的起始点。
• 每次迭代时，我们在前一个Promise的then回调中创建新的延迟Promise，确保只有当前一个操作完成后，才会触发下一次的延迟和输出。
• 这种写法和原async/await代码的执行逻辑完全一致，都是每隔1秒输出一个0，严格保持串行顺序。

本质上，async函数中的await语句会被JavaScript引擎转换成类似的Promise链式调用，所以手动用then链式调用可以完美复现await的串行效果。

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