数据获取：fetch / axios 与 useEffect 取数

// 坑 1：404、500 不会 reject——照样走进「成功」流程
// 坑 2：res.json() 返回的是 Promise，不是对象，还得再 await 一次
async function fetchUser(id: number) {
  const res = await fetch(`/api/users/${id}`);

  if (!res.ok) {                    // HTTP 错误必须手动检查
    throw new Error(`请求失败：${res.status}`);
  }

  const user = await res.json();    // 坑 2 在这：再 await 一次
  return user;
}

import axios from "axios";

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE ?? "/api",
  timeout: 10_000,
});

// 请求拦截器：统一带上 token（对照 Feign 的 RequestInterceptor）
api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器：统一解包、统一处理 401
api.interceptors.response.use(
  (res) => res.data,   // 调用处拿到的直接是业务数据，省掉 res.data.data
  (error) => {
    if (error.response?.status === 401) {
      // 未登录 / token 过期：踢去登录页，第 35 篇细讲
    }
    return Promise.reject(error);
  }
);

import { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
import { api } from "../api/client";

interface User {
  id: number;
  name: string;
  email: string;
}

function UserDetail() {
  const { id } = useParams<{ id: string }>();
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let ignore = false;               // 本次 effect 是否已作废
    const controller = new AbortController();

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const data = await api.get(`/users/${id}`, {
          signal: controller.signal,  // 请求层面也支持取消
        });
        if (!ignore) setUser(data);
      } catch (e) {
        if (!ignore && !axios.isCancel(e)) {
          setError(e as Error);       // 被主动取消的不算错误
        }
      } finally {
        if (!ignore) setLoading(false);
      }
    }

    load();
    return () => {
      ignore = true;         // 依赖变了 / 组件卸载：旧的一次作废
      controller.abort();    // 真正掐断在途的请求，省流量省内存
    };
  }, [id]);

  if (loading) return <p>加载中…</p>;
  if (error) return <p>出错了：{error.message}</p>;
  return <h2>{user?.name}（{user?.email}）</h2>;
}

// t1: 点「下一个」→ 发出请求 A（id=1），恰好赶上网络抖动，飞得慢
// t2: 再点「下一个」→ 发出请求 B（id=2），一路畅通，先返回
//     → setUser(用户2)，屏幕显示用户 2，看起来一切正常
// t3: 请求 A 迟到返回 → setUser(用户1) → 屏幕被旧数据覆盖！
//     而此时地址栏明明是 /users/2