fetch是浏览器原生API，轻量但需手动处理错误、Cookie、超时等；axios是第三方库，开箱即用，内置拦截器、自动JSON序列化、超时控制等功能，适合中大型项目。
JavaScript 中发起网络请求最常用的是 fetch 和 axios，两者都能发 HTTP 请求，但设计目标、默认行为和使用体验差异明显。选哪个不取决于“谁更好”，而要看项目需求、团队习惯和是否需要额外功能。
fetch 是浏览器原生 API，轻量但需手动处理细节
fetch 是现代浏览器内置的标准 API，无需安装依赖，语法简洁：
示例：
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error('网络响应失败');
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
但它有几点必须注意：
立即学习“Java免费学习笔记（深入）”；
-
不会自动抛出网络错误：HTTP 状态码如 404、500 不会触发
catch，需手动检查res.ok或res.status -
默认不带 Cookie：跨域请求需显式设置
credentials: 'include' - 不支持请求/响应拦截、超时控制、取消请求（需 AbortController）
- 没有内置的请求体序列化（如自动转 JSON）或响应数据预处理
axios 是第三方库，开箱即用，封装更友好
axios 是基于 XMLHttpRequest（或 Node.js 的 http 模块）封装的库，需通过 npm 安装：npm install axios。它把常见痛点都做了默认处理：
-
HTTP 错误自动 reject：4xx / 5xx 响应直接进
catch -
默认携带 Cookie（同域），跨域也只需配置
withCredentials: true - 内置请求/响应拦截器：方便统一加 token、loading、错误提示等
- 天然支持超时、取消请求（CancelToken 已弃用，推荐用 AbortController）、自动序列化/反序列化 JSON
-
在 Node.js 环境也能用（
fetch在纯 Node 中不可用，需靠 polyfill 或替代方案）
示例：
axios.get('/api/users', {
timeout: 5000,
withCredentials: true
})
.then(res => console.log(res.data))
.catch(err => {
if (err.code === 'ECONNABORTED') console.log('请求超时');
});
适用场景建议
- 小项目、学习、或只做简单 GET 请求 →
fetch足够，无额外依赖 - 中大型应用、需统一管理请求逻辑（鉴权、错误、日志）→
axios更省心 - 需要兼容老版本 IE（
fetch不支持）→ 只能用axios或XMLHttpRequest - 使用 TypeScript 且重视类型推导 → 两者都支持良好，但
axios的响应泛型更直观（axios.get）(...)
不复杂但容易忽略的关键点
-
fetch的Response.body是 ReadableStream，只能读一次；多次读取需用res.clone() -
axios默认 Content-Type 是application/json，发表单要用FormData并手动设 header - 两者都遵循 CORS 规则，服务端需正确配置
Access-Control-Allow-Origin等头 - Vite / Webpack 项目中，开发环境可配代理避免跨域，与请求库本身无关
