Axios 与数据获取

浏览器原生 fetch 够用，但 拦截器、超时、取消请求、统一错误体 在团队项目里很快重复。Axios 是 React 生态最常见的 REST 客户端；常与 TanStack Query 的 queryFn 搭配。

学习目标

• 配置 Axios 实例与请求/响应拦截器
• 处理 REST 错误、401 与重试边界
• 理解 HTTP 缓存与 Query 缓存的分工

fetch vs Axios

	fetch	Axios
浏览器内置	✅	需安装
拦截器	需封装	内置
JSON 默认	需 .json()	自动 transform
取消	AbortController	CancelToken / signal
Node/测试	一致	同 API

react-data 用 fetch 教学；platform 联调 Spring Boot API 时 Axios 实例更易统一 baseURL 与鉴权头。

实例与拦截器

import axios from "axios";

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8080",
  timeout: 15_000,
});

api.interceptors.request.use((config) => {
  const token = getToken();
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

api.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response?.status === 401) redirectToLogin();
    return Promise.reject(normalizeError(err));
  }
);

原则：拦截器做 横切关注点（token、日志），业务错误在 queryFn 或组件层展示。

与 TanStack Query 组合

useQuery({
  queryKey: ["track", slug],
  queryFn: async () => {
    const { data } = await api.get(`/tracks/${slug}`);
    return data;
  },
});

Query 管 何时请求、缓存；Axios 管 怎么请求、怎么带 header。

错误与重试

• 4xx：通常不重试（除 429 带 backoff）
• 5xx / 网络：Query 可配 retry: 2
• 给用户 可行动文案：「登录过期」而非 Network Error

后端错误体格式应对齐 spring-boot-essentials 的全局异常结构，前端 normalizeError 解析 message 字段。

HTTP 缓存 vs Query 缓存

• Cache-Control / ETag：浏览器与 CDN 层，适合静态 GET
• Query staleTime：应用层，适合个性化 API

二者可并存：Axios GET 仍走 HTTP 缓存，Query 再叠一层内存 dedupe。

练习

• 创建 api.ts 实例，对接本站 tracks API
• 响应拦截器把 Spring 的 { message, code } 转成统一 AppError
• 用 AbortController 在路由切换时取消 in-flight 请求

小结

Axios 统一 REST 管道，Query 统一服务端状态生命周期。 下一课 GraphQL 客户端概览。