优化React useEffect中的Fetch请求与错误处理

import React, { useEffect, useState } from 'react';
// 假设AuthContext提供了loggedIn和getToken方法
import AuthContext from './AuthContext'; // 示例导入

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

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

        console.log("Token:", token);

        if (!token) {
          console.warn("未获取到认证令牌，请求将不会发送。");
          return false; // 如果没有token，提前退出
        }

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

        console.log("Response:", response);

        if (!response.ok) {
          // 仅当response.ok为false时抛出，但错误信息可能不详细
          throw new Error(`请求失败：${response.status} ${response.statusText}`);
        }

        const { result } = await response.json();
        setPosts(result);
        console.log("Posts loaded:", result);

      } catch (err) {
        console.error("Fetch请求发生错误:", err);
        // 这里可以添加用户友好的错误提示
      }
    };

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

  // ... 组件渲染逻辑
}

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

    if (!response.ok) {
      // 如果响应状态码不是2xx，尝试解析服务器返回的错误信息
      // 注意：response.json()也是一个异步操作
      const errorData = await response.json().catch(() => ({
        message: `服务器返回错误：${response.status} ${response.statusText}`,
        statusCode: response.status
      }));
      // 抛出包含详细错误信息的Error对象
      throw new Error(JSON.stringify(errorData));
    }

    // 如果响应正常，解析并返回JSON数据
    return await response.json();

  } catch (err) {
    // 捕获网络错误或response.json()解析错误
    console.error("Fetcher caught an error:", err);
    // 在开发环境中可以打印详细错误
    if (process.env.NODE_ENV === "development") {
      console.log("Detailed fetcher error:", err);
    }
    // 重新抛出错误，以便调用者可以进一步处理
    throw err;
  }
};

export default fetcher;

import React, { useEffect, useState } from 'react';
import fetcher from './fetcher'; // 导入我们创建的fetcher
import AuthContext from './AuthContext'; // 示例导入

function MyComponent() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getPosts = async () => {
      setLoading(true); // 开始加载
      setError(null);   // 清除之前的错误

      try {
        const token = AuthContext.loggedIn() ? AuthContext.getToken() : null;

        if (!token) {
          setError("用户未认证，无法获取数据。");
          setLoading(false);
          return;
        }

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

        // fetcher已经处理了response.ok，这里直接处理成功数据
        setPosts(data.result); // 假设API返回的数据结构是 { result: [...] }
        console.log("Posts loaded successfully:", data.result);

      } catch (err) {
        console.error("在组件中捕获到错误:", err);
        try {
          // 尝试解析fetcher抛出的JSON字符串错误信息
          const parsedError = JSON.parse(err.message);
          setError(`请求失败: ${parsedError.message || '未知错误'}`);
        } catch (parseErr) {
          // 如果不是JSON格式的错误信息，直接显示原始错误
          setError(`请求失败: ${err.message || '未知错误'}`);
        }
      } finally {
        setLoading(false); // 结束加载
      }
    };

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

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div style={{ color: 'red' }}>错误: {error}</div>;
  }

  return (
    <div>
      <h1>我的帖子</h1>
      {posts.length === 0 ? (
        <p>暂无帖子。</p>
      ) : (
        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li> // 假设post有id和title属性
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;