如何通过Promise.all从多个端点获取多份数据？代码返回Pending Promise的问题咨询

你遇到的问题核心在于：response.json()本身返回的是一个Promise，而不是直接的解析后数据。所以你第一个.then里返回的是两个未被解析的Promise组成的数组，当进入第二个.then时，dataOne和dataTwo其实还是处于pending状态的Promise对象，自然拿不到实际数据。

修正方案一：嵌套使用Promise.all #

只需要在第一个.then里，把两个json()调用再用Promise.all包裹起来，确保它们都被解析完成后再传递给下一个.then：

Promise.all([ fetch(allAirportsURL, bearer), fetch(allFlightsURL, bearer) ])
 .then(([responseOne, responseTwo]) => {
   // 用Promise.all等待两个json()的Promise都完成解析
   return Promise.all([responseOne.json(), responseTwo.json()]);
 })
 .then(([dataOne, dataTwo]) => {
   console.log('data', dataOne); // 现在拿到的就是解析后的实际数据了
 })
 .catch((err) => {
   console.log(err);
 });

修正方案二：使用async/await（更直观） #

如果你的环境支持ES2017+，用async/await写法会更清晰，避免嵌套的.then回调：

async function fetchData() {
  try {
    // 先等待两个fetch请求完成
    const [responseOne, responseTwo] = await Promise.all([
      fetch(allAirportsURL, bearer),
      fetch(allFlightsURL, bearer)
    ]);
    // 再等待两个json解析完成
    const [dataOne, dataTwo] = await Promise.all([
      responseOne.json(),
      responseTwo.json()
    ]);
    console.log('data', dataOne);
  } catch (err) {
    console.log(err);
  }
}

fetchData();

额外提示 #

别忘了检查每个response的状态码——fetch只有在网络层面失败时才会触发.catch，如果请求返回4xx/5xx的错误状态码，它不会自动抛出异常，建议手动判断：

.then(([responseOne, responseTwo]) => {
  if (!responseOne.ok) throw new Error(`Airports request failed: ${responseOne.status}`);
  if (!responseTwo.ok) throw new Error(`Flights request failed: ${responseTwo.status}`);
  return Promise.all([responseOne.json(), responseTwo.json()]);
})

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