# Axios 2026 学习 Demo

先掌握浏览器原生`fetch`，再学习 Axios 如何在已有项目中统一管理请求。Axios 不是替代 HTTP 基础知识的前提条件，而是封装默认地址、超时、鉴权和统一错误处理的工程工具。

## 运行

在仓库根目录执行：

```bash
npm run axios:demo
```

浏览器打开终端打印的 `http://127.0.0.1:3000`。服务使用 Node.js 内置 `http`
模块，不需要安装 Express 或 json-server；页面通过 CDN 加载 Axios，因此首次运行需要网络。

本页为了零安装运行使用 CDN；真实项目应通过包管理器安装 Axios，并由 lockfile 固定版本。

## 本示例覆盖的知识点

- `fetch`：`response.ok`、JSON 解析与 HTTP 错误判断。
- `axios.create()`：按后端服务创建独立客户端，避免污染全局默认配置。
- `params` 与 `data`：前者生成查询字符串，后者作为 JSON 请求体发送。
- 拦截器：请求阶段附加演示 Token 和请求 ID；响应阶段只返回业务数据。
- 错误处理：区分服务端响应、网络错误、超时和主动取消。
- `AbortController`：同时适用于 fetch 与 Axios；不要在新代码中使用已废弃的 `CancelToken`。
- `PATCH` 与 `DELETE`：演示局部更新和删除；是否允许这些方法由后端 API 契约决定。

Java 对照：浏览器中的 Axios 客户端类似按服务配置的 `HttpClient`
或 Spring 的 HTTP 客户端封装；拦截器类似客户端过滤器。Token 的签发和权限判断始终由后端负责，前端只能携带短期凭证。