fetch是原生API,简洁但需手动处理JSON、错误状态和Cookie;axios是功能完备库,自动解析、拦截器、超时取消等开箱即用;轻量场景选fetch,中大型项目优先axios。

JavaScript 实现网络请求最常用的是 fetch(原生 API)和 axios(第三方库),它们都能发起 HTTP 请求,但设计目标、使用方式和默认行为差异明显。
fetch 是浏览器原生支持的 Promise 风格 API
fetch 由浏览器原生提供,无需安装依赖,语法简洁,但默认不带 Cookie、不自动处理 JSON、4xx/5xx 状态码也不会 reject,需手动判断:
- 必须显式调用
.json()、.text()等方法解析响应体 - 只有网络错误(如断网、DNS 失败)才会触发
catch;HTTP 错误状态(如 404、500)仍走then,需检查response.ok或response.status - 默认不发送 Cookie,如需携带,要加
credentials: 'include' - 没有内置请求/响应拦截、超时控制、取消请求(需配合
AbortController)
axios 是功能完备的 HTTP 客户端库
axios 基于 XMLHttpRequest(浏览器)或 http 模块(Node.js),开箱即用,对开发者更友好:
- 自动识别响应内容类型,JSON 响应默认解析为 JS 对象(无需手动
.json()) - HTTP 状态码非 2xx 会直接进入
catch(可配置validateStatus修改规则) - 默认携带 Cookie(同源下),也可统一配置
withCredentials - 支持请求/响应拦截器,方便统一加 token、loading、错误提示等
- 内置超时(
timeout)、取消请求(CancelToken或AbortController)、并发控制(axios.all)
基础用法对比(GET 请求示例)
fetch:
立即学习“Java免费学习笔记(深入)”;
fetch('/api/user', {
method: 'GET',
credentials: 'include'
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
axios:
axios.get('/api/user', {
withCredentials: true
})
.then(res => console.log(res.data))
.catch(err => console.error(err));
选哪个?看场景
- 项目轻量、只需简单请求、想减少依赖 → 优先用
fetch,搭配AbortController和封装工具函数即可补足短板 - 中大型项目、需要统一拦截、token 管理、错误重试、上传进度、TypeScript 支持更好 →
axios更省心 - Node.js 环境(无 fetch)或需兼容旧浏览器(IE)→ 只能选
axios











