如何基于前置API结果，用Promise.all结合Axios动态发起并发API请求？

Got it, let's walk through how to handle this scenario where your concurrent API calls depend on the result of a previous request. This is a super common use case, and it's easy to pull off with promise chaining or async/await.

The key is to chain your promises properly:

• First, make the initial API call that gives you the data you need to decide which concurrent requests to fire
• Use the result of that initial call to build your array of Axios requests
• Pass that array to Promise.all() to run the requests in parallel

Let's say your initial request returns a list of resources the user can access, and you need to fetch each of those resources concurrently:

// 初始请求：获取决定后续请求的依赖数据
const getUserAllowedResources = () => axios.get('/user/allowed-resources');

// 通用资源请求函数
const fetchResource = (resourceType) => axios.get(`/api/${resourceType}`);

// 链式处理流程
getUserAllowedResources()
  .then(initialResponse => {
    // 从初始响应中提取需要并发请求的资源列表
    const resourcesToFetch = initialResponse.data.resources; // 示例返回值：['posts', 'comments', 'notifications']
    
    // 根据资源列表生成并发请求数组
    const concurrentRequests = resourcesToFetch.map(resource => fetchResource(resource));
    
    // 发起并发请求，并将结果传递到下一个then
    return Promise.all(concurrentRequests);
  })
  .then(concurrentResults => {
    // 处理所有并发请求的结果（顺序和请求数组一一对应）
    const postsData = concurrentResults[0].data;
    const commentsData = concurrentResults[1].data;
    const notificationsData = concurrentResults[2].data;

    console.log('Fetched posts:', postsData);
    console.log('Fetched comments:', commentsData);
    console.log('Fetched notifications:', notificationsData);
    // 这里写你的业务逻辑
  })
  .catch(error => {
    // 捕获任何环节的错误：初始请求失败，或任意一个并发请求失败
    console.error('Request failed:', error.response?.data || error.message);
  });

If you prefer a cleaner, more linear style, async/await works perfectly here:

async function fetchAllRequiredData() {
  try {
    // 第一步：获取初始依赖数据
    const initialResponse = await getUserAllowedResources();
    const resourcesToFetch = initialResponse.data.resources;

    // 第二步：生成并发起并发请求
    const concurrentResults = await Promise.all(
      resourcesToFetch.map(resource => fetchResource(resource))
    );

    // 处理结果
    const [postsRes, commentsRes, notificationsRes] = concurrentResults;
    console.log('Posts:', postsRes.data);
    console.log('Comments:', commentsRes.data);
    console.log('Notifications:', notificationsRes.data);
  } catch (error) {
    console.error('Failed to fetch data:', error.response?.data || error.message);
  }
}

// 执行函数
fetchAllRequiredData();

• 快速失败特性: Promise.all() will reject immediately if any of the concurrent requests fail. If you need to tolerate partial failures (e.g., continue processing even if one request fails), use Promise.allSettled() instead. You can then filter the results to handle successes and failures separately.
• Error handling: In the .catch() block, you can check error.response to get details about which request failed (status code, response data, etc.).

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