Fetch 默认不处理HTTP错误状态码，需手动检查response.ok；Axios默认将4xx/5xx视为错误并reject，且内置超时、拦截器、自动JSON序列化等能力。
Fetch API 基本用法与常见陷阱
Fetch 是浏览器原生支持的 Promise 风格 HTTP 客户端，无需额外安装，但默认不带请求超时、自动重试、取消请求等能力。fetch() 返回的 Promise 只有在网络错误（如断网）时才 reject，HTTP 状态码 404、500 等仍会 resolve，必须手动检查 response.ok 或 response.status。
- 忘记检查
response.ok导致 4xx/5xx 被当成成功处理 -
fetch()不会自动携带 cookie，需显式传{ credentials: 'include' } - 不能直接取消请求，需配合
AbortController实现 - 没有内置请求体序列化逻辑，
POST发送 JSON 时要手动JSON.stringify()并设置Content-Type
const controller = new AbortController();
fetch('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: 123 }),
signal: controller.signal
})
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.catch(err => {
if (err.name === 'AbortError') console.log('请求已取消');
});
Axios 的核心优势与配置要点
Axios 是基于 Promise 的第三方 HTTP 客户端，Node.js 和浏览器均可运行，对开发体验做了大量封装。它默认将 4xx/5xx 状态码视为错误并 reject，自动序列化/解析 JSON，支持请求/响应拦截器、全局默认配置、超时控制和取消机制（通过 CancelToken 或 AbortController）。
- 默认超时是
0（永不超时），务必显式设置timeout: 10000 - 拦截器中修改 config 后，必须返回该 config，否则请求中断
- 在 Node.js 环境下，
axios.create()实例的默认baseURL不会自动拼接相对路径，需确认是否以/开头 - 响应数据默认在
response.data中，不是直接返回解析后的值
const api = axios.create({
baseURL: '/api',
timeout: 8000,
headers: { 'X-Client': 'web' }
});
api.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${getToken()}`;
return config; // 忘记 return 就会卡住
});
Fetch 与 Axios 在实际项目中的取舍依据
选 Fetch 还是 Axios，取决于项目复杂度和团队约束。纯静态页面、轻量工具脚本、或需要最小化包体积（如微前端子应用）时，Fetch 更合适；中大型应用、需统一错误处理/日志/鉴权逻辑、或已有 Axios 生态（如 Vue 项目早期广泛使用）时，Axios 更省力。
- 构建产物大小：Fetch 零依赖，Axios（v1.6+）压缩后约 14KB，若用 Vite + 摇树，影响可控
- TypeScript 支持：两者都提供完整类型定义，但 Axios 的泛型写法（
axios.get）更直观('/user') - 服务端渲染（SSR）：Fetch 在 Node.js 需额外引入
node-fetch或使用undici，Axios 开箱即用 - 调试友好性：Axios 默认在控制台打印请求/响应摘要，Fetch 需手动加日志
现代项目中一个务实的混合策略
不必强求全栈统一。可以保留 Fetch 处理简单、低频、无副作用的请求（如埋点上报、健康检查），用 Axios 封装业务主接口，并通过自定义 Hook（React）或 Composable（Vue）统一管理 loading、error、token 刷新等逻辑。
立即学习“Java免费学习笔记（深入）”；
- 避免在 Axios 中重复实现 Fetch 已有的能力（如
AbortController取消），优先用其原生signal支持 - 若项目已用
fetch()且稳定，不要仅因“Axios 更流行”而迁移；反之，若已有 Axios 实例且维护良好，也不必为了“用原生”强行替换 - 注意 Axios v1.x 默认不发送 CORS 凭据，
withCredentials: true需显式开启，而 Fetch 的credentials: 'include'更直白
真正容易被忽略的是错误分类处理——网络异常、HTTP 状态异常、业务逻辑异常（如后端返回 { code: 1001, msg: '余额不足' }）应分层捕获，无论用哪个库，这一层抽象通常得自己补。
