React useEffect中fetch请求的健壮错误处理与最佳实践

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

        console.log(token);

        if (!token) {
          // 如果没有token，提前返回，避免后续请求
          return false; 
        }

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

        console.log(response);

        // 默认的错误检查：只检查response.ok
        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) => {
      // 如果响应状态码不是2xx（即response.ok为false）
      if (!response.ok) {
        // 尝试解析响应体作为错误信息抛出
        // 注意：如果后端没有返回JSON格式的错误，这里可能会报错
        const errorData = await response.json().catch(() => ({ message: `HTTP error! status: ${response.status}` }));
        throw errorData; // 抛出包含详细错误信息的对象
      }
      // 如果响应成功，则解析JSON数据并返回
      return response.json();
    })
    .catch((err) => {
      // 在开发环境下打印详细错误信息，方便调试
      if (process.env.NODE_ENV === "development") {
        console.error("Fetcher error:", err);
      }
      // 重新抛出错误，以便调用方（如useEffect中的try-catch）能够捕获
      throw err;
    });

export default fetcher;

import fetcher from './fetcher'; // 假设fetcher.js在同级目录或指定路径

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

        if (!token) {
          console.log("No authentication token found.");
          return; // 没有token，直接返回，不再尝试请求
        }

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

        // fetcher已经处理了错误，这里可以直接处理成功的数据
        console.log("Fetched posts:", data);
        setPosts(data.result); // 假设后端返回的数据结构是 { result: [...] }
      } catch (err) {
        // 这里捕获的是fetcher抛出的详细错误信息（可能是JSON对象或Error对象）
        console.error("Failed to fetch posts:", err);
        // 根据错误类型，可以进一步处理，例如显示用户友好的错误消息
        // alert(`Error: ${err.message || JSON.stringify(err)}`); 
      }
    };

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