Fetch 与 Axios：JavaScript HTTP 请求库的详细比较
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
-
推荐：「stormsha的主页」👈，「stormsha的知识库」👈持续学习，不断总结，共同进步，为了踏实，做好当下事儿~
-
专栏导航
- Python系列: Python面试题合集，剑指大厂
- Git系列: Git操作技巧
- GO系列: 记录博主学习GO语言的笔记，该笔记专栏尽量写的试用所有入门GO语言的初学者
- 数据库系列: 详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
- 运维系列: 总结好用的命令，高效开发
- 算法与数据结构系列: 总结数据结构和算法,不同类型针对性训练,提升编程思维
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
💖The Start💖点点关注，收藏不迷路💖📒文章目录
- Fetch
- 优点
- 缺点
- 示例
- Axios
- 优点
- 缺点
- 示例
- 总结
fetch 和 axios 是两种常用的 HTTP 请求库，用于在前端与服务器进行通信。它们各自有优点和缺点，选择哪一个取决于具体的需求和项目环境。以下是它们的详细比较：
Fetch
fetch 是一种原生的 JavaScript API，用于发起 HTTP 请求。它是现代浏览器内置的，不需要额外的库。
优点
- 内置：
fetch是浏览器原生支持的，不需要额外的安装。 - 灵活：提供了更底层、更灵活的 API，可以处理各种复杂的请求和响应场景。
- 基于 Promise：
fetch使用 Promise 进行异步操作，代码更简洁。
缺点
- 繁琐的错误处理：
fetch只会对网络错误进行捕获，对于 HTTP 状态码错误（如 404 或 500）不会抛出异常，需要手动处理。 - 不支持取消请求：
fetch原本不支持取消请求，虽然可以通过 AbortController 来实现，但稍显麻烦。 - 较少的高阶功能：没有内置的请求和响应拦截器等高阶功能。
示例
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}return response.json();}).then(data => console.log(data)).catch(error => console.error('There was a problem with your fetch operation:', error));
Axios
axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。
优点
- 易用性：API 设计比较简单直观，封装良好，使用方便。
- 自动处理 JSON：
axios会自动将 JSON 数据转换为 JavaScript 对象。 - 错误处理：
axios对 HTTP 状态码错误会抛出异常，简化了错误处理流程。 - 取消请求：
axios支持取消请求（使用 CancelToken）。 - 拦截器：支持请求和响应拦截器，可以轻松地在发送请求或接收到响应时执行操作。
- 更好的浏览器兼容性：支持更老版本的浏览器。
缺点
- 额外的依赖：需要安装第三方库，不像
fetch那样内置。 - 体积较大：相比
fetch，axios的体积要大一些。
示例
import axios from 'axios';axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => {if (error.response) {// 服务器响应了一个状态码范围在2xx以外console.error('Server responded with:', error.response.status);} else if (error.request) {// 请求已经发出，但没有收到响应console.error('No response received:', error.request);} else {// 其他错误console.error('Error', error.message);}});
总结
选择 fetch 还是 axios 取决于你的具体需求：
- 如果你需要一个轻量级、内置的解决方案并且浏览器环境较为现代，可以选择
fetch。 - 如果你需要更多高级功能（如请求和响应拦截器、自动 JSON 处理、取消请求等），以及更好的错误处理机制，
axios会是一个更好的选择。
🔥🔥🔥道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
| 💖The End💖点点关注，收藏不迷路💖 |