如何访问已解析Promise中的值？getPeople返回Promise数组取值遇阻

我懂你现在的困扰——你调用getPeople(0,4)后，在Promise.all的结果里拿到的item[1]还是一堆Promise，根本取不到实际的数据。问题出在getPeople函数的返回值上，它现在返回的是未处理的Promise数组，而不是一个能等待所有请求完成的Promise。

问题根源 #

当你把getPeople(0,4)放进Promise.all的参数数组时，Promise.all只会等待getData()这个单个Promise完成，而把getPeople返回的Promise数组直接当作普通值返回了——它不会自动去等待数组里的每个Promise resolve。所以你看到的item[1]就是那个Promise数组，而不是请求回来的数据。

修复方案 #

只需要修改getPeople函数，让它返回一个用Promise.all包裹后的Promise，这样它会等待所有内部的axios请求都完成后，再返回所有请求结果的数组：

function getPeople(start, end) { 
  const peopleArray = []; 
  for (let i = start; i <= end; i++) { 
    peopleArray.push(axios.get(`https://www.testsite.net/api/test/workers/${i}`)); 
  } 
  // 用Promise.all包裹Promise数组，返回一个统一的Promise
  return Promise.all(peopleArray); 
}

之后如何访问数据 #

修改完函数后，你的useEffect代码就可以正常拿到数据了：

useEffect(() => { 
  Promise.all([getData(), getPeople(0, 4)]).then(item => { 
    // item[0] 是getData的结果，item[1] 是所有人员请求的响应数组
    console.log(item[1]); // 现在这里是每个axios响应对象的数组
    // 比如要拿第一个人的数据：item[1][0].data
    setPersonData(item); 
  }).catch(error => {
    // 别忘了处理请求失败的情况
    console.error('请求出错:', error);
  }); 
}, []);

可选：用async/await让代码更清晰 #

如果你觉得Promise链式调用看着麻烦，也可以改成async/await的写法，可读性更高：

useEffect(() => { 
  const fetchAllData = async () => {
    try {
      // 并行发起两个请求，等待全部完成
      const [dataResult, peopleResult] = await Promise.all([getData(), getPeople(0, 4)]);
      console.log(peopleResult); // 直接拿到所有人员的响应数据
      setPersonData([dataResult, peopleResult]);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  fetchAllData();
}, []);

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