fetch 是浏览器原生 API，轻量简洁但需手动处理错误、cookie 和超时；axios 是功能完备的第三方库，内置拦截器、自动 JSON 处理、错误分类等，适合复杂场景。
JavaScript 中发起网络请求最常用的是 fetch（原生 API）和 axios（第三方库），两者都能发 GET/POST 等请求，但设计目标、默认行为和使用体验差异明显。
fetch 是浏览器原生支持的 Promise 接口
fetch 由浏览器提供，无需安装，语法简洁：
示例：GET 请求
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
注意点：
立即学习“Java免费学习笔记（深入）”；
- 默认不带 cookie，需显式加
{ credentials: 'include' } - 400/500 状态码不会自动 reject，要手动检查
res.ok或res.status - 不支持请求超时、取消（需配合
AbortController） - 不支持 progress 事件（如上传进度）
axios 是功能更全的 HTTP 客户端库
axios 基于 XMLHttpRequest（浏览器）或 http 模块（Node.js），开箱即用更多实用特性：
示例：POST 请求 + 自动错误处理
axios.post('/api/login', { username: 'a', password: 'b' })
.then(res => console.log(res.data))
.catch(err => {
// err.response 有 status/statusText/data
// err.request 是原生 XMLHttpRequest 实例
console.error(err.response?.data?.message || err.message);
});
优势包括：
- 默认携带 cookie（可配置
withCredentials） - HTTP 错误状态（如 404、500）自动进入
catch - 内置请求/响应拦截器，方便统一加 token、日志、错误提示
- 支持超时（
timeout: 5000）、取消请求（CancelToken或AbortController） - 自动序列化 JSON 请求体、自动解析 JSON 响应
选哪个？看场景
项目轻量、只需基础请求 → 用 fetch，减少依赖，现代浏览器兼容良好（IE 不支持，需 polyfill）。
需要统一错误处理、拦截逻辑、上传下载进度、兼容老环境或团队已有规范 → axios 更省心。
React/Vue 项目中，两者都常见；Next.js / SSR 场景下，fetch 可服务端复用（Node.js 18+ 原生支持），而 axios 需额外适配。
小提醒：别忽略错误边界
无论用哪个，都要处理网络异常（断网、跨域失败、DNS 错误等）——这些通常触发 catch，但不会返回 response 对象。建议区分判断：
-
err.name === 'TypeError' && err.message.includes('fetch')→ 网络层失败 -
err.response存在 → HTTP 层错误（如 401） -
err.request存在但err.response为空 → 请求发出但无响应
