循环按序执行Promise获取数据，结果仅保留最后一个元素，求解答

嘿，我太懂你刚接触Promise时踩这种坑的感受了！你猜的没错——问题不是Promise.resolve([])本身没把元素加入数组，而是你在构建Promise链的时候，没有正确地累积结果数组，导致最后只留下了最后一个任务的输出。

先看看你大概率写错的代码（踩坑典型） #

我猜你的代码大概是这样的：

let promiseChain = Promise.resolve([]);
const tasks = ['task1', 'task2', 'task3'];

tasks.forEach(task => {
  promiseChain = promiseChain.then(arr => {
    // 模拟你的异步任务，比如接口请求、文件读取
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(`promise${task.slice(-1)}`); // 直接返回单个结果
      }, 100);
    });
  });
});

promiseChain.then(result => console.log(result)); // 输出: promise3

这里的问题很明显：每次then回调里，你没有把新的异步结果合并到原数组，而是直接返回了单个Promise的结果。这样一来，promiseChain从一开始的「包含空数组的Promise」，慢慢变成了「包含单个结果的Promise」，到最后就只剩最后一个任务的输出了。

正确的写法：在Promise链中累积数组 #

你需要在每个then回调里，把新结果加入数组，再返回更新后的数组：

let promiseChain = Promise.resolve([]);
const tasks = ['task1', 'task2', 'task3'];

tasks.forEach(task => {
  promiseChain = promiseChain.then(arr => {
    return new Promise(resolve => {
      setTimeout(() => {
        const newResult = `promise${task.slice(-1)}`;
        arr.push(newResult); // 把新结果加入原数组
        resolve(arr); // 返回更新后的数组
      }, 100);
    });
  });
});

promiseChain.then(result => console.log(result)); // 输出: ["promise1", "promise2", "promise3"]

更优雅的方式：用reduce构建Promise链 #

比起forEach，reduce天生适合这种「累积式」的Promise链构建，代码更清晰：

const tasks = ['task1', 'task2', 'task3'];

const finalResult = tasks.reduce((chain, task) => {
  return chain.then(arr => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([...arr, `promise${task.slice(-1)}`]); // 用扩展运算符创建新数组（更符合immutable风格）
      }, 100);
    });
  });
}, Promise.resolve([])); // 初始值是包含空数组的Promise

finalResult.then(result => console.log(result)); // 正确输出所有结果

最直观的方式：用async/await循环 #

如果你的运行环境支持ES8+，用async/await写顺序循环会更易懂，完全不用纠结Promise链：

async function processTasksSequentially() {
  const tasks = ['task1', 'task2', 'task3'];
  const result = [];
  
  for (const task of tasks) {
    // 等待当前异步任务完成
    const taskResult = await new Promise(resolve => {
      setTimeout(() => resolve(`promise${task.slice(-1)}`), 100);
    });
    result.push(taskResult); // 把结果加入数组
  }
  
  return result;
}

processTasksSequentially().then(result => console.log(result)); // 输出预期的数组

总结一下 #

• Promise.resolve([])本身没问题，它只是帮你初始化了一个包含空数组的Promise，作为链的起点。
• 核心问题是你之前的代码没有在then回调中累积数组，而是每次都替换成了单个任务的结果。
• 顺序执行异步任务的三种常用方式：forEach+手动累积Promise链、reduce构建链、async/await循环，选你觉得最顺手的就行。

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