如何在for循环中使用Promise.all()？解决axios请求结果undefined问题

你的代码出现undefined结果主要有三个核心问题，下面逐一说明并给出修正方案：

问题分析 #

1. then回调未返回处理后的数据：你在then里只执行了response.data.sort()，但没有返回任何值，导致每个Promise最终的resolved值默认是undefined。
2. 错误处理逻辑吞掉了错误：每个axios请求单独绑定catch，一旦请求失败，这个catch会返回一个resolved状态的Promise（因为没有抛出错误或返回rejected Promise），既隐藏了错误，也让该Promise结果变为undefined。
3. 打印对象错误：Promise.all的then里打印的是原始Promise数组，不是请求返回的处理后数据。

修正后的代码 #

const arr = {...checkbox};
const keys = Object.keys(arr).filter(k => arr[k] === true);

// 用map生成Promise数组，更简洁
const promises = keys.map(key => 
  axios.get(`my/api/${key}`)
    .then(response => {
      // 排序后返回处理好的数据，确保Promise有有效结果
      response.data.sort();
      return response.data;
    })
);

// 统一处理所有请求的结果和错误
Promise.all(promises)
  .then(sortedDataList => {
    // sortedDataList是所有排序后的数据组成的数组，顺序和keys一一对应
    console.log(sortedDataList);
    // 在这里执行存储逻辑
  })
  .catch(err => {
    // 任何一个请求失败都会进入这里，统一处理错误
    error.value = err;
  });

关键修正点 #

• 用map替代for循环，更简洁地生成Promise数组。
• 在then中返回排序后的response.data，让每个Promise都携带有效结果。
• 将catch移到Promise.all之后，统一处理所有请求的错误，避免错误被隐藏。
• 在Promise.all的then中接收处理后的结果数组，直接用于后续存储操作。

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