[!info] related notes

• 所属 MOC: HTTP 与前端网络请求 MOC
• 概念: ajax, xhr, fetch-api, axios
• Axios 深入: Axios 请求配置, Axios 实例, Axios 拦截器, Axios 错误模型, Axios 取消请求
• 状态码与错误处理: frontend-http-status-code-handling, http-status-codes

前端 HTTP 请求：XHR vs Fetch vs Axios

范围

这篇只解决一个问题：在前端发 HTTP 请求时，这几件事分别处在什么层、有什么差异、该怎么选。

为什么要放在一起理解

• AJAX 不是 API，而是一种“局部更新、避免整页刷新”的开发实践。
• XHR/Fetch 是浏览器提供的 Web API（不同年代/不同风格）。
• Axios 是第三方库，目标是把常见工程需求（拦截器、统一错误处理、超时、取消等）做成更顺手的工具箱。

把它们混在一起写成“教程长文”时，最容易出现两类问题：

• 概念层和实现层互相污染（比如把 AJAX 当成某个函数）。
• 重复堆代码片段，但没有把关键差异讲清楚。

演进与定位

• AJAX（实践/模式） -> 常用实现曾经是 XHR（API）
• Fetch（API） -> Promise 风格 + Request/Response 对象模型
• Axios（库） -> 封装 Fetch/XHR/Node adapter，提供工程化能力

关键差异（抓住这些就够用）

• 错误语义:
  • Fetch: 请求构造、网络、浏览器访问限制或取消等失败会 reject；HTTP 4xx/5xx 仍 resolve，需要自己判断 response.ok。
  • Axios: 默认把非 2xx 当成 reject，可由 validateStatus 改变。
• 响应体读取:
  • Fetch: response.json() / response.text() 等需要显式读，并且 body 通常只能读取一次。
  • Axios: 通常直接拿 response.data。
• 取消请求:
  • Fetch: AbortController。
  • Axios: 现代版本也支持 AbortController（旧版有 CancelToken）。
• 进度与上传:
  • XHR 更容易做上传/下载进度监听（尤其是上传）。
  • Fetch 可逐块读取下载响应；浏览器没有与 xhr.upload.onprogress 等价的通用上传进度事件。

选型建议（工程口径）

• 已使用原生 Fetch 且需求简单：可按需封装状态码检查、响应体读取和取消，不必只因项目变大就换库。
• 需要统一实例、拦截器和转换策略，或项目已有 Axios：复用其能力，并明确 adapter 与运行环境。
• 需要细粒度进度/兼容老环境: 仍可能会选 XHR 或基于 XHR 的封装。

取消客户端等待不代表回滚服务端副作用；超时要说明是否覆盖响应头、响应体或整个业务流程。

下一步阅读

• 概念：ajax -> xhr -> fetch-api -> axios
• 错误处理模板：frontend-http-status-code-handling