解决React useEffect中Fetch请求不执行及错误处理的最佳实践

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

        console.log(token);

        if (!token) { // 前置条件检查
          return false; // 如果没有token，则提前终止
        }

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

        console.log(response);

        if (!response.ok) { // HTTP错误处理
          throw new Error("Something went wrong");
        }

        const { result } = await response.json();

        setPosts(result);
      } catch (err) { // 捕获网络错误或手动抛出的错误
        console.error(err);
      }
    };

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

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

    if (!response.ok) {
      // 如果HTTP状态码不是2xx，尝试解析服务器返回的错误信息
      let errorBody = null;
      try {
        errorBody = await response.json(); // 尝试解析JSON错误体
      } catch (jsonError) {
        // 如果无法解析JSON，则使用响应文本或默认错误
        errorBody = { message: response.statusText || "Unknown error", status: response.status };
      }
      // 抛出包含详细信息的错误对象
      throw {
        status: response.status,
        statusText: response.statusText,
        url: response.url,
        body: errorBody,
        message: errorBody.message || `Request failed with status ${response.status}`
      };
    }
    // 如果响应正常，则解析并返回JSON数据
    return await response.json();
  } catch (error) {
    // 捕获网络错误或其他意外错误
    if (process.env.NODE_ENV === "development") {
      console.error("Fetcher encountered an error:", error);
    }
    // 重新抛出错误，以便调用者可以处理
    throw error;
  }
};

export default fetcher;

import React, { useEffect, useState } from 'react';
import fetcher from './fetcher'; // 假设fetcher.js在同级目录或合适路径
// import AuthContext from './AuthContext'; // 假设AuthContext已定义

function MyComponent() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const getPosts = async () => {
      try {
        // 模拟AuthContext的loggedIn和getToken方法
        const AuthContext = {
            loggedIn: () => true, // 假设用户已登录
            getToken: () => "my-auth-token-123" // 假设获取到token
        };

        const token = AuthContext.loggedIn() ? AuthContext.getToken() : null; // 使用null更明确

        if (!token) {
          console.warn("认证令牌不可用，跳过数据请求。");
          // 可以选择显示用户未登录的提示
          return; // 如果没有token，则提前终止函数执行
        }

        console.log("准备发送请求，使用令牌:", token);

        // 使用fetcher工具函数发送请求
        const data = await fetcher(
          "http://localhost:5008/workout/getAllPosts",
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              authorization: `Bearer ${token}`,
            },
          }
        );

        console.log("成功获取数据:", data);
        // 假设服务器返回的数据结构是 { result: [...] }
        setPosts(data.result);

      } catch (err) {
        // 捕获由fetcher抛出的所有错误（网络错误、HTTP错误、解析错误等）
        console.error("获取帖子失败:", err);
        // 根据错误类型，可以给用户展示不同的错误信息
        if (err.status === 401) {
            // 处理认证失败
            alert("会话过期，请重新登录。");
        } else if (err.body && err.body.message) {
            // 显示服务器返回的具体错误信息
            alert(`错误：${err.body.message}`);
        } else {
            alert("发生未知错误，请稍后再试。");
        }
      }
    };

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

  return (
    <div>
      <h1>我的帖子</h1>
      {posts.length > 0 ? (
        <ul>
          {posts.map((post, index) => (
            <li key={index}>{post.title || JSON.stringify(post)}</li>
          ))}
        </ul>
      ) : (
        <p>暂无帖子或正在加载...</p>
      )}
    </div>
  );
}

export default MyComponent;