在React应用中构建健壮的Fetch请求：深入理解与优化错误处理

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

        if (!token) {
          return false;
        }

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

        // 这里的!response.ok只会在HTTP状态码为4xx或5xx时为true，
        // 但fetch Promise本身不会抛出错误，而是成功resolve。
        if (!response.ok) {
          throw new Error("Something went wrong"); // 需要手动抛出
        }

        const { result } = await response.json();
        setPosts(result);
      } catch (err) {
        console.error(err); // 只有网络错误或手动抛出的错误才会被捕获
      }
    };

    getPosts();
  }, []);

// fetcher.js
const fetcher = (url, options) =>
  fetch(url, options)
    .then(async (response) => {
      // 检查响应是否成功 (HTTP状态码在200-299之间)
      if (!response.ok) {
        // 如果不是成功响应，尝试解析响应体作为错误信息
        // 注意：有些错误响应可能不返回JSON，这里需要考虑兼容性
        try {
          const errorData = await response.json();
          // 抛出包含服务器返回错误信息的错误
          throw errorData;
        } catch (jsonError) {
          // 如果响应体不是有效的JSON，或者解析失败，
          // 则抛出一个通用错误，可以包含状态码
          throw new Error(`HTTP error! Status: ${response.status}, Message: ${response.statusText}`);
        }
      }
      // 如果响应成功，解析响应体为JSON并返回
      return response.json();
    })
    .catch((err) => {
      // 在开发环境中打印原始错误，便于调试
      if (process.env.NODE_ENV === "development") {
        console.error("Fetcher error:", err);
      }
      // 将错误重新抛出，以便调用者可以进一步处理
      throw err;
    });

export default fetcher;

// 假设您已将fetcher.js导入
import fetcher from './fetcher'; // 根据您的文件路径调整

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

        if (!token) {
          // 如果没有token，直接返回，不发起请求
          console.warn("No authentication token found. Skipping fetch.");
          return;
        }

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

        // 如果fetcher成功解决，data将是解析后的JSON数据
        console.log("Posts fetched successfully:", data);
        setPosts(data.result); // 假设API返回的数据结构是 { result: [...] }

      } catch (err) {
        // fetcher抛出的所有错误（网络错误或HTTP错误）都将在这里被捕获
        console.error("Failed to fetch posts:", err);
        // 根据错误类型，可以显示不同的用户提示
        // 例如：if (err.message === "Unauthorized") { redirectToLogin(); }
      }
    };

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