`fetch` 和 `axios`的前端使用区别
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
欢迎访问的个人博客：https://swzbk.site/，加好友，拉你入福利群
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
fetch和axios` 是前端常用的两种 HTTP 客户端，以下是它们的核心区别及适用场景：
一、本质区别
| 特性 | fetch | axios |
|---|---|---|
| 类型 | 浏览器原生 API（部分环境需 polyfill） | 第三方库（需通过 npm/yarn 安装） |
| 底层实现 | 基于 Promise | 基于 Promise，封装了 XMLHttpRequest |
二、核心功能对比
1. 请求与响应
| 功能 | fetch | axios |
|---|---|---|
| 基本用法 | fetch(url).then(res => res.json()) | axios.get(url).then(res => res.data) |
| 请求配置 | 需手动设置 headers、method 等参数 | 支持 config 对象统一配置（如 axios({ method, url, data })） |
| 默认响应 | 响应体需手动解析（如 .json()、.blob()） | 自动解析为 JSON（res.data 直接获取） |
2. 浏览器兼容性
| 环境 | fetch | axios |
|---|---|---|
| 现代浏览器 | 支持（Chrome/Firefox/Edge 等） | 支持 |
| 旧浏览器（如 IE） | 需单独引入 whatwg-fetch polyfill | 原生支持（基于 XMLHttpRequest） |
3. 高级功能
| 功能 | fetch | axios |
|---|---|---|
| 请求拦截器 | 无内置支持，需手动封装 | 支持 axios.interceptors.request.use() |
| 响应拦截器 | 无内置支持，需手动封装 | 支持 axios.interceptors.response.use() |
| 取消请求 | 需使用 AbortController | 内置 CancelToken |
| 上传进度监听 | 需手动计算（ReadableStream 或第三方库） | 内置 onUploadProgress 回调 |
| 下载进度监听 | 需手动计算（response.body.pipeThrough()） | 内置 onDownloadProgress 回调 |
4. 错误处理
| 场景 | fetch | axios |
|---|---|---|
| 网络错误 | 拒绝 Promise（如断网） | 拒绝 Promise |
| HTTP 错误状态码 | 不会 拒绝 Promise（需手动检查 res.ok） | 会 拒绝 Promise（如 404/500 状态码） |
5. 浏览器 vs Node.js
| 环境 | fetch | axios |
|---|---|---|
| 浏览器 | 原生支持 | 支持 |
| Node.js | 需额外引入（如 node-fetch） | 原生支持（内置 http/https 模块封装） |
三、典型使用场景
推荐用 axios 的场景：
-
文件上传/下载：
- 需显示进度条（
onUploadProgress）。 - 多文件上传需合并请求（
FormData封装+单次请求）。 - 示例：
axios.post('/upload', formData, { onUploadProgress: (e) => console.log(`上传进度：${Math.round((e.loaded/e.total)*100)}%`), });
- 需显示进度条（
-
复杂交互：
- 需要请求/响应拦截（如添加全局
token、统一错误处理）。 - 支持并发请求（
axios.all()）。
- 需要请求/响应拦截（如添加全局
-
兼容性要求高：
- 需兼容 IE 或旧浏览器。
推荐用 fetch 的场景：
-
轻量需求：
- 简单 GET/POST 请求，无需额外功能。
- 示例：
fetch('/api/data', { method: 'POST', body: JSON.stringify(data) }) .then(res => res.json());
-
减少依赖：
- 不想引入第三方库（如 React Native 原生支持
fetch）。
- 不想引入第三方库（如 React Native 原生支持
四、如何选择？
| 需求 | 选 axios | 选 fetch |
|---|---|---|
| 上传进度条 | ✅ 内置支持 | ❌ 需手动实现 |
| 浏览器兼容性（如 IE） | ✅ 原生支持 | ❌ 需 polyfill |
| 拦截器、取消请求等高级功能 | ✅ 内置支持 | ❌ 需手动封装 |
| 轻量应用/减少依赖 | ❌ 增加打包体积 | ✅ 原生无依赖 |
| Node.js 环境 | ✅ 原生支持 | ❌ 需额外引入模块 |
总结
- 如果项目需要在现代浏览器中使用且对功能要求简单，Fetch 是个不错的选择，优点在于无需额外依赖、语法简洁。但需要注意手动处理错误、转换响应和取消请求的问题。
- 如果需要更丰富的功能（如请求/响应拦截、自动 JSON 解析、全局配置、取消请求等）以及对 IE 或 Node.js 的兼容性要求较高，Axios 是更佳的解决方案。
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
欢迎访问的个人博客：https://swzbk.site/，加好友，拉你入福利群
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
`