如何用Promise/then按顺序执行函数数组，前序resolve后再执行后续？

你有如下函数数组：

let funcs = []
funcs.push(() => {window.x = fetch()})
funcs.push(() => {console.log(window.x)})
funcs.push(() => {console.log("Hello, world!")})

想要实现类似Promise串联的效果，让第N+1个函数仅在第N个函数的异步操作完成后再执行，可以用以下两种方式：

方法一：使用Promise.reduce链式调用 #

利用Array.reduce把函数数组逐步串联成Promise链，确保每个函数都在前一个执行完成后才启动：

funcs.reduce((prevTask, currentFunc) => {
  return prevTask.then(() => {
    // 执行当前函数，包装成Promise确保等待异步操作完成
    return Promise.resolve(currentFunc());
  });
}, Promise.resolve()); // 初始值为已完成的Promise，启动链式调用

方法二：使用async/await循环 #

用async函数配合for循环，逐个执行并等待每个函数的异步操作完成，写法更直观：

async function runInSequence(funcs) {
  for (const func of funcs) {
    const taskResult = func();
    // 等待当前函数的异步任务完成（如果有的话）
    await Promise.resolve(taskResult);
  }
}

// 调用执行
runInSequence(funcs);

注意事项 #

你的第一个函数中window.x = fetch()会把Promise直接赋值给window.x，如果需要获取fetch的实际响应数据，需要把这个函数改成async并添加await：

// 修正第一个函数以获取实际响应数据
funcs.push(async () => {
  const response = await fetch('你的请求URL');
  window.x = await response.json(); // 根据需求选择res.text()等其他解析方式
});

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