React中如何在useEffect内正确解析Promise.all获取API数据

你的问题核心在于没正确处理fetch和response.json()的异步特性——这两个方法都返回Promise，必须等待它们全部resolve才能拿到实际数据。

错误原因拆解 #

1. 第一个版本：x.json()是异步操作，直接打印它只会输出Promise对象，而非解析后的JSON数据。
2. 第二个版本：responses.map(r => r.json())生成了一个Promise数组，但你没有用Promise.all等待这些Promise完成，所以下一个then里拿到的依然是未resolve的Promise，自然无法直接提取数据。

正确写法 #

写法1：链式调用中嵌套Promise.all

useEffect(() => {
  Promise.all([
    fetch(`${baseUrl}/counts?entity=color`),
    fetch(`${baseUrl}/counts?entity=brand`),
    fetch(`${baseUrl}/counts?entity=category`)
  ])
  .then(responses => Promise.all(responses.map(r => r.json()))) // 这里要再加一层Promise.all等待json解析完成
  .then(([colorData, brandData, categoryData]) => {
    console.log(colorData, brandData, categoryData); // 现在拿到的是实际API返回数据
    // 这里可以把数据存入state或做其他业务处理
  })
  .catch(error => {
    // 务必处理请求或解析失败的情况
    console.error('请求出错:', error);
  });
}, []);

写法2：用async/await（更直观易读）

useEffect(() => {
  const fetchCounts = async () => {
    try {
      // 先等待所有请求响应完成
      const responses = await Promise.all([
        fetch(`${baseUrl}/counts?entity=color`),
        fetch(`${baseUrl}/counts?entity=brand`),
        fetch(`${baseUrl}/counts?entity=category`)
      ]);
      // 再等待所有响应体解析为JSON
      const [colorData, brandData, categoryData] = await Promise.all(responses.map(r => r.json()));
      console.log(colorData, brandData, categoryData);
      // 处理数据逻辑
    } catch (error) {
      console.error('请求出错:', error);
    }
  };

  fetchCounts();
}, []);

关键注意点 #

• 必须添加错误捕获逻辑，避免请求或解析失败时出现未处理的Promise rejection。
• useEffect的回调函数不能直接是async函数（会返回Promise，不符合useEffect对返回值的要求），所以要在内部定义async函数再调用。

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