前端团队禁用axios改用fetch，核心原因在于拦截器链与运行时兼容性问题

近期，一家前端团队在其工程规范中新增一条硬性规定：新项目禁止引入 axios，存量项目需在下一轮重构中逐步移除。该决定在内部引发不小震动——毕竟 axios 在国内前端生态中长期占据主流地位，许多工程师从入行起就将其视为 HTTP 请求的默认工具。但团队负责人指出，这一调整并非出于对“原生党”的偏好，而是基于真实项目维护成本与技术演进趋势的审慎判断。

axios 曾解决的问题，如今大多已被原生 fetch 覆盖

回溯历史，axios 在 2016 年前后确有其不可替代的价值。彼时原生 fetch 刚进入浏览器，功能残缺：无超时控制、无请求取消机制、不自动解析 JSON、4xx/5xx 错误不会触发 catch 分支，开发者需手动封装大量样板代码。

但截至 2026 年，现代浏览器中的 fetch 已完成关键能力补全：

原生支持 AbortController 实现请求取消；
可通过 signal.timeout() 设置超时（部分浏览器需 polyfill）；
response.json() 成为标准方法，无需额外处理；
流式响应（ReadableStream）原生支持，适用于 SSE、大文件分片下载等场景；
SSR 与 Edge Runtime（如 Cloudflare Workers）环境下天然兼容，无需适配层。

对比之下，axios 的核心优势已大幅收窄。更关键的是，其部分设计反而成为现代开发的负担。

三大现实痛点推动技术栈切换

第一，拦截器嵌套导致调试黑洞

该团队项目曾配置 4 层请求拦截器（鉴权注入、日志埋点、错误统一处理、灰度标记），每层又分 request/response 两个钩子，共 8 个拦截函数。业务代码调用 axios.get() 后，请求需依次穿过 4 层拦截器才抵达网络层；响应返回后，再逆序经过 4 层加工才到达 .then() 回调。

一旦中间某层拦截器吞掉错误、修改 header 或遗漏 return，问题定位极其困难。尤其当多个拦截器共享同一上下文对象时，副作用极易扩散，形成“黑盒链”。团队发现，超过 60% 的接口异常排查耗时集中在拦截器逻辑验证环节。

第二，CancelToken 遗留代码造成维护分裂

axios 自 v0.22.0 起已将 CancelToken 标记为废弃，官方推荐迁移到 AbortController。但因历史代码量庞大，团队中仍存在数十处 CancelToken 用法。新功能开发则统一采用 AbortController，导致项目内并存两套请求取消机制。

这种分裂不仅增加认知负荷，更在跨模块协作时埋下隐患：例如 A 模块用 CancelToken 创建请求，B 模块试图用 AbortController.signal 中断它，结果无效。团队评估后认为，统一底层取消机制是降低长期维护成本的必要步骤。

第三，运行时兼容性问题日益突出

随着边缘计算普及，该团队部分接口部署于 Cloudflare Workers。Workers 运行时基于 V8 Isolate，原生支持 fetch，但不支持 XMLHttpRequest——而 axios 在浏览器端恰恰依赖后者发送请求。

为使 axios 在 Workers 中运行，团队不得不引入额外的适配层（如 axios-adaptor-fetch），这本质上是在为一个非必需的抽象层“擦屁股”。相比之下，直接使用原生 fetch 可零成本接入，且与 Deno、Node.js 18+ 的 globalThis.fetch 保持一致行为。

30 行封装替代完整 axios 生态

团队并未简单“裸用” fetch，而是基于其能力构建了一个极简封装层（约 30 行核心逻辑），涵盖以下能力：

URL 参数拼接（支持 params 对象）；
超时控制（通过 AbortController + setTimeout 组合实现）；
统一错误处理（封装 RequestError 类，携带 status 与原始 response）；
响应体自动解析（JSON / Text / Blob）；
全局基础 URL 配置。

该方案摒弃了拦截器链、请求队列、自动重试等复杂特性，转而强调逻辑透明与可调试性。业务代码中所有请求路径清晰可见，无隐藏副作用。团队反馈，迁移后接口联调平均耗时下降 40%，CI 中因请求异常导致的测试失败率降低 65%。

值得注意的是，这一决策并非否定 axios 的历史价值。在需要强兼容性（如 IE11 支持）、或重度依赖拦截器组合的遗留系统中，axios 仍有合理位置。但对新建项目与现代化架构而言，原生 fetch 的轻量性、标准化与运行时友好性正逐渐成为更优解。

行业层面，类似转向已在多个头部技术团队发生。GitHub 官方客户端已全面迁移到 fetch；Vercel 的 Next.js 文档明确推荐优先使用原生 API；Vue 3 官方示例也逐步减少 axios 示例比重。技术选型的本质不是追逐新潮，而是在特定阶段选择维护成本最低、扩展性最强的方案。

当一个工具从“解决问题”变为“制造问题”，替换它就不再是技术偏执，而是工程理性的必然选择。