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💖点点关注,收藏不迷路💖 |
相关文章:
Fetch 与 Axios:JavaScript HTTP 请求库的详细比较
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storm…...
记录一个Ajax发送JSON数据的坑,后端RequestBody接收参数小细节?JSON对象和JSON字符串的区别?
上半部分主要介绍我实际出现的问题,最终下面会有总结。 起因:我想发送post请求的data,但是在浏览器中竟然被搞成了地址栏编码 如图前端发送的ajax请求数据 如图发送的请求体: 很明显是keyvalue这种形式,根本就不是…...
【智能算法应用】长鼻浣熊优化算法求解二维路径规划问题
摘要 本文采用长鼻浣熊优化算法 (Coati Optimization Algorithm, COA) 求解二维路径规划问题。COA 是一种基于长鼻浣熊的觅食和社群行为的智能优化算法,具有快速收敛性和较强的全局搜索能力。通过仿真实验,本文验证了 COA 在复杂环境下的路径规划性能&a…...
微服务中的负载均衡算法与策略深度解析
在微服务架构中,负载均衡是保证系统高可用性和高性能的关键技术。通过合理地将请求分配给多个服务实例,负载均衡策略可以优化资源利用,实现请求的均衡处理。本文将深入探讨微服务中的负载均衡算法及其配置策略,帮助读者更好地理解…...
初知C++:AVL树
文章目录 初知C:AVL树1.AVL树的概念2.AVL树的是实现2.1.AVL树的结构2.2.AVL树的插入2.3.旋转2.4.AVL树的查找2.5.AVL树平衡检测 初知C:AVL树 1.AVL树的概念 • AVL树是最先发明的自平衡⼆叉查找树,AVL是⼀颗空树,或者具备下列性…...
[LeetCode] 67. 二进制求和
题目描述: 给你两个二进制字符串 a 和 b ,以二进制字符串的形式返回它们的和。 示例 1: 输入:a "11", b "1" 输出:"100" 示例 2: 输入:a "1010", b "…...
工业物联网关-ModbusTCP
Modbus-TCP模式把网关视作Modbus从端设备,主端设备可以通过Modbus-TCP协议访问网关上所有终端设备。用户可以自定义多条通道,每条通道可以配置为TCP Server或者TCP Slave。注意,该模式需要指定采集通道,采集通道可以是串口和网口通…...
子组件向父组件传值$emit
点击子组件的按钮,将子组件的值传递给父组件,并进行提示。 子组件 <template><div><button click"emitIndex">clickme</button></div> </template> <script> export default {methods: {emitInde…...
校车购票微信小程序的设计与实现(lw+演示+源码+运行)
摘 要 由于APP软件在开发以及运营上面所需成本较高,而用户手机需要安装各种APP软件,因此占用用户过多的手机存储空间,导致用户手机运行缓慢,体验度比较差,进而导致用户会卸载非必要的APP,倒逼管理者必须改…...
【Golang】关于Go语言中的定时器原理与实战应用
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…...
matlab不小心删除怎么撤回
预设项——>删除文件——>移动至临时文件夹 tem临时文件夹下...
云原生、云计算、虚拟化概念概述
(带着批评阅读,不对的请评论区补充) 1、出现年代前后顺序 虚拟化------>云计算------>云原生 2、虚拟化 虚拟化侧重描述实现,最开始的技术是模拟、hook指令执行软件程序,后续出现了半虚拟化、CPU硬件提供虚拟化…...
【Trulens框架】用TruLens 自动化 RAG 应用项目评估测试
前言: 什么是Trulens TruLens是面向神经网络应用的质量评估工具,它可以帮助你使用反馈函数来客观地评估你的基于LLM(语言模型)的应用的质量和效果。反馈函数可以帮助你以编程的方式评估输入、输出和中间结果的质量,从而…...
互联网线上融合上门洗衣洗鞋小程序,让洗衣洗鞋像点外卖一样简单
随着服务创新的风潮,众多商家已巧妙融入预约上门洗鞋新风尚,并携手洗鞋小程序,开辟线上蓝海。那么,这不仅仅是一个小程序,它究竟蕴含着哪些诱人好处呢? 1. 无缝融合,双线共赢:小程序…...
R语言绘制三维散点图
之前我们绘制的属于二维散点图,具有两个维度通常是 x 轴和 y 轴)上展示数据点的分布。只能呈现两个变量之间的关系。而三维散点图则具有三个维度(x 轴、y 轴和 z 轴)上展示数据点的分布。可以同时呈现三个变量之间的关系ÿ…...
2014年国赛高教杯数学建模A题嫦娥三号软着陆轨道设计与控制策略解题全过程文档及程序
2014年国赛高教杯数学建模 A题 嫦娥三号软着陆轨道设计与控制策略 嫦娥三号于2013年12月2日1时30分成功发射,12月6日抵达月球轨道。嫦娥三号在着陆准备轨道上的运行质量为2.4t,其安装在下部的主减速发动机能够产生1500N到7500N的可调节推力,…...
QD1-P25 CSS 背景
本节学习:CSS 背景属性 本节视频 https://www.bilibili.com/video/BV1n64y1U7oj?p25 背景颜色 背景图片 不重复 横向重复 纵向重复 双向重复 背景图片大小 400px 600px 原图大小 显示器宽度不够时&…...
《Linux运维总结:基于ARM64+X86_64架构CPU使用docker-compose一键离线部署mongodb 7.0.14容器版分片集群》
总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、部署背景 由于业务系统的特殊性,我们需要面向不通的客户安装我们的业务系统&…...
Java利用ChromeDriver插件网页截图(Wondows版+Linux版)
chromedriver是谷歌浏览器驱动,用来模拟谷歌运行操作的一个工具,此处主要讲解Java后端利用此插件进行网页截图,并且适配Linux部署。 环境准备 Wondows服务器或电脑 本机需安装Chrome谷歌浏览器,根据本机浏览器版本,下载对应的chr…...
无人机之交互系统篇
一、系统构成 无人机交互系统通常由多个子系统组成,包括但不限于: 多模式人机交互装置:这是人机交互系统的基础层,通常包括计算机、局域网、传感器等设备,用于实现操作员与无人机之间的数据交互和指令传递。例如&…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
