嵌套异步场景下Promise.all未等待所有请求完成的问题求助

我来帮你搞定这个问题！你的核心困扰在于没有正确收集并等待所有嵌套层级的Promise完成，其实只需要对现有代码做几处小调整就能实现加载状态的管理，以及监听所有请求何时全部结束。

问题分析 #

你当前的代码里，countries.map(async c => { ... })会生成一个Promise数组，每个元素对应一个国家下所有市场请求的Promise。但你没有把这个数组保存下来，也没有用Promise.all去等待它们全部resolve。之前尝试返回Promise数组但没成功，大概率是因为没有正确返回内部Promise.all的结果，导致外层Promise无法追踪到内部请求的完成状态。

解决方案 #

我们只需要两步就能解决：

1. 收集countries.map返回的所有Promise；
2. 用外层的Promise.all等待这些Promise全部完成。

完整代码示例 #

const countries = ['de', 'pt', 'en']
const market = ['test1', 'test2']

// 1. 收集每个国家对应的请求Promise数组
const countryLevelPromises = countries.map(async country => {
  const marketRequests = market.map(market => {
    // 这里可以根据需求处理响应，比如转成JSON
    return fetch(`${endpoint}/${country}/${market}`)
      .then(response => {
        // 可选：处理HTTP错误（fetch仅在网络失败时reject，HTTP状态码错误不会）
        if (!response.ok) {
          throw new Error(`请求失败：${response.status}`)
        }
        return response.json()
      })
  })
  
  // 必须返回当前国家所有请求的结果，这样外层Promise才能追踪到完成状态
  return Promise.all(marketRequests)
})

// 2. 等待所有国家的所有请求全部完成
try {
  // 设置加载状态为true
  let isLoading = true
  
  const allResults = await Promise.all(countryLevelPromises)
  // allResults是二维数组：[[德国市场1结果, 德国市场2结果], [葡萄牙市场1结果, ...], ...]
  
  // 处理所有请求完成后的逻辑
  console.log('所有请求已完成', allResults)
} catch (error) {
  // 处理任意一个请求失败的情况
  console.error('请求出错', error)
} finally {
  // 无论成功失败，都关闭加载状态
  isLoading = false
}

关键细节说明 #

• 为什么要返回内部的Promise.all？：async函数本身会返回一个Promise，返回内部Promise.all的结果后，外层的Promise会等待该国家下所有市场请求完成才会resolve。
• 加载状态的管理：在Promise.all开始前设置isLoading = true，在finally块中设置为false，这样不管请求成功还是失败，加载状态都会正确更新。
• 错误处理：添加try/catch可以捕获任意一个请求的失败，同时在fetch中判断response.ok能处理HTTP状态码错误（比如404、500），避免遗漏错误场景。

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