React useEffect中处理异步数据请求、错误与状态更新的最佳实践

async function fetchData(url) {
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  });

  // 检查HTTP响应状态码
  if (!response.ok) {
    // 抛出Error实例，包含详细的错误信息
    throw new Error(`Failed to fetch ${url}, got status ${response.status}`);
  }

  // 返回解析后的JSON数据
  // 注意：此处直接返回await的结果，确保拿到的是数据而非Promise
  return await response.json();
}

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 定义一个异步的立即执行函数表达式 (IIFE)
    (async function() {
      try {
        // 1. 获取初始数据
        setLoading(true);
        setError(null); // 重置错误状态

        const initialData = await fetchData('data/initial-data.json');

        // 2. 根据初始数据发起并行请求
        // 使用Promise.all处理多个依赖请求，提高效率
        const allMoreDataPromises = initialData.map(async (item) => {
          try {
            // 假设item有一个属性用于构建URL
            const moreSpecificData = await fetchData(`data/moredata-${item.id}.json`);
            return { ...item, details: moreSpecificData }; // 合并数据
          } catch (err) {
            console.error(`Error fetching more data for item ${item.id}:`, err);
            // 返回错误实例，以便后续过滤或处理
            return err;
          }
        });

        // 等待所有并行请求完成
        const results = await Promise.all(allMoreDataPromises);

        // 3. 过滤掉失败的请求结果，并更新状态
        const successfulData = results.filter(x => !(x instanceof Error));
        setData(successfulData);

      } catch (err) {
        console.error('Failed to fetch initial data or process subsequent requests:', err);
        setError(err.message); // 设置错误信息到状态
      } finally {
        setLoading(false); // 请求完成，无论成功失败
      }
    })(); // 立即执行这个异步函数
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  if (loading) return <div>Loading data...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Application Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>
            {item.name} - {item.details ? item.details.description : 'No details'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;