`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 的场景：

1. 文件上传/下载：

   • 需显示进度条（onUploadProgress）。

   • 多文件上传需合并请求（FormData 封装+单次请求）。

   • 示例：

     axios.post('/upload', formData, {
       onUploadProgress: (e) => console.log(`上传进度：${Math.round((e.loaded/e.total)*100)}%`),
     });

2. 复杂交互：

   • 需要请求/响应拦截（如添加全局 token、统一错误处理）。
   • 支持并发请求（axios.all()）。

3. 兼容性要求高：

   • 需兼容 IE 或旧浏览器。

推荐用 fetch 的场景：

1. 轻量需求：

   • 简单 GET/POST 请求，无需额外功能。

   • 示例：

     fetch('/api/data', { method: 'POST', body: JSON.stringify(data) })
       .then(res => res.json());

2. 减少依赖：

   • 不想引入第三方库（如 React Native 原生支持 fetch）。

四、如何选择？

需求	选 axios	选 fetch
上传进度条	✅ 内置支持	❌ 需手动实现
浏览器兼容性（如 IE）	✅ 原生支持	❌ 需 polyfill
拦截器、取消请求等高级功能	✅ 内置支持	❌ 需手动封装
轻量应用/减少依赖	❌ 增加打包体积	✅ 原生无依赖
Node.js 环境	✅ 原生支持	❌ 需额外引入模块

总结

• 如果项目需要在现代浏览器中使用且对功能要求简单，Fetch 是个不错的选择，优点在于无需额外依赖、语法简洁。但需要注意手动处理错误、转换响应和取消请求的问题。
• 如果需要更丰富的功能（如请求/响应拦截、自动 JSON 解析、全局配置、取消请求等）以及对 IE 或 Node.js 的兼容性要求较高，Axios 是更佳的解决方案。

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

欢迎访问的个人博客：https://swzbk.site/，加好友，拉你入福利群

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

`