`fetch` 和 `axios`的前端使用区别

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

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

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

fetch和axios` 是前端常用的两种 HTTP 客户端，以下是它们的核心区别及适用场景：

一、本质区别

二、核心功能对比

1. 请求与响应

2. 浏览器兼容性

3. 高级功能

4. 错误处理

5. 浏览器 vs Node.js

三、典型使用场景

推荐用 axios 的场景：

1. 文件上传/下载：

   • 需显示进度条（onUploadProgress）。
   • 多文件上传需合并请求（FormData 封装+单次请求）。
   • 示例：

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

   • 复杂交互：

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

     • 兼容性要求高：

       • 需兼容 IE 或旧浏览器。

推荐用 fetch 的场景：

1. 轻量需求：

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

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

   • 减少依赖：

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

四、如何选择？

总结

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

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

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

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

  `

  
  （图片来源网络，侵删）
  
  （图片来源网络，侵删）