fetch是浏览器原生API,轻量简洁但需手动处理cookie、错误、JSON序列化等;axios是功能完备的第三方库,内置拦截器、超时、自动JSON处理等,适合复杂需求。

JavaScript 发送 HTTP 请求主要靠 fetch(原生 API)和 axios(第三方库),两者都能发 GET/POST 等请求,但设计思路、默认行为和使用体验差别不小。
fetch 是浏览器原生支持的轻量 API
fetch 是现代浏览器内置的标准方法,无需安装,语法简洁:
- 返回 Promise,必须用
.then()或async/await处理 - 默认不带 cookie,要加
credentials: 'include'才能传凭证 - 400/500 状态码不会自动 reject,需手动检查
response.ok - 没有内置请求/响应拦截、超时控制、取消请求(得靠
AbortController) - 上传文件时需手动构造
FormData,JSON 数据要自己JSON.stringify()并设Content-Type
axios 是功能更全的封装库
axios 基于 XMLHttpRequest(或 Node.js 的 http 模块),在浏览器和 Node 环境都可用:
- 默认携带 cookie(可配置
withCredentials) - 网络错误或 4xx/5xx 状态码都会触发
catch,更符合直觉 - 内置请求/响应拦截器,方便统一加 token、日志、错误处理
- 支持超时设置(
timeout: 5000)、取消请求(CancelToken或AbortController)、自动 JSON 序列化/反序列化 - 上传文件更简单:
axios.post(url, formData)直接支持
什么时候选 fetch,什么时候选 axios?
项目轻量、只跑浏览器、需求简单(比如查个公开 API),用 fetch 足够,没额外依赖;需要登录态管理、错误统一处理、文件上传、兼容老环境或团队已有 axios 生态,选 axios 更省心。Vue 3 官方推荐 fetch,React 社区两者都常见。
立即学习“Java免费学习笔记(深入)”;
一个小对比示例:发一个带 token 的 POST 请求
fetch 写法:
const res = await fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer xxx'
},
body: JSON.stringify({ name: 'Alice' })
});
if (!res.ok) throw new Error('请求失败');
const data = await res.json();
axios 写法:
const res = await axios.post('/api/user', { name: 'Alice' }, {
headers: { Authorization: 'Bearer xxx' }
});
const data = res.data;
基本上就这些。不复杂,但容易忽略细节。











