如何等待多个嵌套promise全部resolve？两层axios请求场景实现问题

问题原因 #

原代码的执行逻辑存在时序问题：

1. 初始化的promises数组初始为空，遍历urls时仅发起了第一层axios请求，第一层请求的then回调属于异步微任务，不会同步执行
2. Promise.all(promises)在遍历结束后会立刻执行，此时所有then回调还未触发，promises数组没有任何元素，因此直接返回空数组
3. 后续第一层请求完成后才会往promises里推入第二层请求的Promise，但此时Promise.all已经执行完毕，自然拿不到后续的请求结果

正确实现 #

你需要将每个url对应的「第一层请求+第二层请求」整个链路封装为独立的Promise，再统一传入Promise.all即可：

const requestPromises = urls.map(url => {
  // 第一层请求完成后返回第二层请求的Promise
  return axios.get(url).then(firstResponse => {
    return axios.get(firstResponse.data.url);
  });
});

Promise.all(requestPromises).then(secondResponses => {
  // secondResponses就是所有第二层请求的返回结果数组
  // 此处处理结果逻辑
});

如果偏好async/await写法，逻辑更清晰：

const getSecondResponse = async (firstUrl) => {
  const firstRes = await axios.get(firstUrl);
  return await axios.get(firstRes.data.url);
};

// 所有请求链路并发执行
const secondResponses = await Promise.all(urls.map(getSecondResponse));
// 处理结果逻辑

如果需要避免单个请求链路失败导致所有结果都无法返回，可以给每个链路单独加错误捕获：

const requestPromises = urls.map(url => {
  return axios.get(url)
    .then(firstRes => axios.get(firstRes.data.url))
    .catch(err => {
      console.error(`请求链路失败，初始url为${url}:`, err);
      // 可自定义错误情况下的返回值，比如null或者错误信息对象
      return null;
    });
});

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