掌握React中Fetch API的健壮错误处理：构建可复用的API请求工具

useEffect(() => {
  const fetchData = async () => {
    try {
      const token = AuthContext.loggedIn() ? AuthContext.getToken() : 0;

      if (!token) {
        console.log("No token, skipping fetch.");
        return; // 或者重定向到登录页
      }

      const response = await fetch(
        "http://localhost:5008/workout/getAllPosts",
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            authorization: `Bearer ${token}`,
          },
        }
      );

      // 关键：Fetch不会为4xx/5xx状态码自动抛出错误
      if (!response.ok) {
        // 在这里需要手动处理非2xx状态码的错误
        const errorData = await response.json(); // 尝试解析后端返回的错误信息
        throw new Error(errorData.message || "Something went wrong with the request");
      }

      const { result } = await response.json();
      setPosts(result); // 更新状态

    } catch (err) {
      console.error("Fetch error:", err);
      // 在这里处理网络错误或手动抛出的HTTP状态码错误
    }
  };

  fetchData();
}, []); // 依赖数组为空，只在组件挂载时执行一次

// fetcher.js
const fetcher = async (url, options) => {
  try {
    const response = await fetch(url, options);

    // 如果响应状态码不是2xx，则抛出错误
    if (!response.ok) {
      // 尝试解析后端返回的错误信息
      const errorBody = await response.json().catch(() => ({ message: '未知错误', status: response.status }));
      const error = new Error(errorBody.message || `HTTP错误：${response.status}`);
      error.status = response.status;
      error.body = errorBody;
      throw error; // 抛出自定义错误对象
    }

    // 如果响应正常，则解析JSON数据
    return response.json();
  } catch (err) {
    // 捕获网络错误或上面手动抛出的HTTP状态码错误
    if (process.env.NODE_ENV === "development") {
      console.error("Fetcher error:", err);
    }
    throw err; // 将错误重新抛出，以便上层调用者处理
  }
};

export default fetcher;

// 在你的React组件文件 (例如：MyComponent.jsx)
import React, { useEffect, useState, useContext } from 'react';
import AuthContext from './AuthContext'; // 假设你有一个AuthContext
import fetcher from './fetcher'; // 导入自定义的fetcher

function MyComponent() {
  const [posts, setPosts] = useState([]);
  // const { loggedIn, getToken } = useContext(AuthContext); // 如果AuthContext提供这些方法

  useEffect(() => {
    const getPosts = async () => {
      try {
        const token = AuthContext.loggedIn() ? AuthContext.getToken() : 0; // 假设AuthContext有loggedIn和getToken方法

        if (!token) {
          console.log("No authentication token available.");
          // 可以选择重定向到登录页或显示提示信息
          return;
        }

        // 使用自定义的fetcher进行API调用
        const data = await fetcher(
          "http://localhost:5008/workout/getAllPosts",
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              authorization: `Bearer ${token}`,
            },
          }
        );

        // fetcher已经处理了response.ok的检查和JSON解析
        // 这里直接获取到解析后的数据
        setPosts(data.result); // 假设后端返回的数据结构是 { result: [...] }

      } catch (err) {
        // 在这里统一处理所有类型的错误（网络错误、HTTP状态码错误等）
        console.error("Failed to fetch posts:", err.message || err);
        // 可以根据err.status显示不同的用户提示
        // 例如：if (err.status === 401) { alert("请重新登录"); }
      }
    };

    getPosts();
  }, []); // 依赖数组为空，确保只在组件挂载时执行一次

  return (
    <div>
      <h1>Posts</h1>
      {posts.length > 0 ? (
        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>No posts available or loading...</p>
      )}
    </div>
  );
}

export default MyComponent;