当前位置： 首页 > news >正文

【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

news 2026/4/3 19:51:24

省流读法

ajax是js异步技术的术语，早期相关的api是xhr，它是一个术语。
fetch是es6新增的用于网络请求标准api，它是一个api。
axios是用于网络请求的第三方库，它是一个库。

1.Ajax

它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。
很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。

正解：

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

特点：

局部刷新页面，无需重载整个页面。

简单来说，Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式，这也是很多面试官喜欢让面试者手撕的代码之一。
利用 XMLHttpRequest 模块实现 Ajax。

XMLHttpRequest示例代码

<body><script>function ajax(url) {const xhr = new XMLHttpRequest();xhr.open("get", url, false);xhr.onreadystatechange = function () {// 异步回调函数if (xhr.readyState === 4) {if (xhr.status === 200) {console.info("响应结果", xhr.response)}}}xhr.send(null);}ajax('https://smallpig.site/api/category/getCategory')</script>
</body>

2.Fetch

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。
很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

正解：

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

特点：

使用 promise，不使用回调函数。 采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。

所以这里就和 Ajax 又很大不同了，一个是思想，一个是真实存在的 API，不过它们都是用来给网络请求服务的，我们一起来看看利用 Fetch 实现网络请求。

fetch示例代码

<body><script>function ajaxFetch(url) {fetch(url).then(res => res.json()).then(data => {console.info(data)})}ajaxFetch('https://smallpig.site/api/category/getCategory')</script>
</body>

上段代码利用 Fetch 发送了一个最简单的 get 请求，其中最重要的特点之一就是采用了.then 链式调用的方式处理结果，这样不仅利于代码的可读，而且也解决了回调地狱的问题。

3.axios

Axios 是用于发出网络请求的第三方 HTTP 客户端库。绝大部分使用基于xhr封装，截止文章编写时间也已经支持fetch，可以在浏览器和 Node.js 中使用。它提供了更高级别的封装，使发送请求和处理响应更加简单和灵活。axios 支持以简洁的方式设置请求参数、处理请求和响应拦截器，并提供了更好的错误处理和取消请求的支持。

正解：

Axios 是用于发出网络请求的第三方 HTTP 客户端库。

特点：

使用 Promise 对象来处理异步请求的结果，可以更加方便地进行链式调用和错误处理。

axios示例代码

axios.get('https://api.example.com/data').then(function(response) {console.log(response.data);}).catch(function(error) {console.log(error);});

总结

ajax是js异步技术的术语，早期相关的api是xhr，它是一个术语。
fetch是es6新增的用于网络请求标准api，它是一个api。
axios是用于网络请求的第三方库，它是一个库。

易混淆点以及注意点

  1. xhr是ajax的一种实现
  2. fetch应该和xhr作比较，不能和ajax和axios做比较
  3. axios和fetch都基于promise
  4. fetch使用了关注分离的设计思想（请求和响应结果分开处理）
  5. axios目前也支持fetch

相关文章：

【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

省流读法 ajax是js异步技术的术语&#xff0c;早期相关的api是xhr&#xff0c;它是一个术语。 fetch是es6新增的用于网络请求标准api&#xff0c;它是一个api。 axios是用于网络请求的第三方库&#xff0c;它是一个库。 1.Ajax 它的全称是&#xff1a;Asynchronous JavaScri…...

编程日记 2023/10/18 7:41:09

互联网Java工程师面试题·Java 总结篇·第五弹

目录 47、Java 语言如何进行异常处理&#xff0c;关键字&#xff1a;throws、throw、try、catch、finally 分别如何使用&#xff1f; 48、运行时异常与受检异常有何异同&#xff1f; 49、列出一些你常见的运行时异常&#xff1f; 50、阐述 final、finally、finalize 的区别…...

编程日记 2023/10/18 7:40:08

车载电子电器架构 —— 国产基础软件现在与未来

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…...

编程日记 2023/10/18 7:39:07

在.Core中用EF添加数据库实体类

首先安装dotnet-ef工具&#xff0c;否则提示&#xff1a; *无法执行&#xff0c;因为找不到指定的命令或文件。 可能的原因包括: *你拼错了内置的 dotnet 命令。 *你打算执行 .NET Core 程序&#xff0c;但 dotnet-ef 不存在。 你打算运行全局工具&#xff0c;但在路径上找不到…...

编程日记 2023/10/18 7:38:06

unigui添加ssl（https）访问的方法

首先到腾讯云或者阿里云去申请免费的证书&#xff0c;前提是在该服务商那有申请过域名&#xff0c;怎么找出这个界面&#xff1f;网页顶部一般都有个搜索框&#xff0c;输入【证书】或者【SSL】就能看到了&#xff0c;然后点击申请免费证书&#xff0c;把解析信息填入自己的域名…...

编程日记 2023/10/18 7:37:05

安防监控系统EasyCVR视频汇聚平台设备树收藏按钮的细节优化

视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#…...

编程日记 2023/10/18 7:36:04

数据结构----算法--排序算法

数据结构----算法–排序算法 一.冒泡排序&#xff08;BubbleSort&#xff09; 1.冒泡排序的核心思想 相邻两个元素进行大小比较&#xff0c;如果前一个比后一个大&#xff0c;就交换 注意&#xff1a; 在冒泡排序的过程中&#xff0c;促进了大的数往后去&#xff0c;小的数…...

编程日记 2023/10/18 7:33:00

Unity3D 基础——使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果

使用 Mathf.SmoothDamp 函数制作相机的缓冲跟踪效果&#xff0c;让物体的移动不是那么僵硬&#xff0c;而是做减速的缓冲效果。将以下的脚本绑定在相机上&#xff0c;然后设定好 target 目标对象&#xff0c;即可看到相机的缓动效果。通过设定 smoothTime 的值&#xff0c;可以…...

编程日记 2023/10/18 7:31:58

leetcode-200. 岛屿数量

1. 题目 leetcode题目链接 2. 解答 思路&#xff1a; 需要循环遍历每个节点&#xff1b;找到陆地&#xff0c;基于陆地开始遍历陆地的上下左右&#xff1b;数组dirm dirn就可以表示某个区域的上下左右&#xff1b;标记遍历过的节点&#xff1b;设计循环的退出条件&#xf…...

编程日记 2023/10/18 7:30:57

python的搜索引擎系统设计与实现 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python的搜索引擎系统设计与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;5分创新点&#xff1a;3分 该项目较为新颖&#xff…...

编程日记 2023/10/18 7:29:56

Unity随笔：在Unity中使用多线程需要注意什么

Unity3D 支持多线程编程&#xff0c;但是在 Unity 中使用多线程需要注意一些限制和注意事项。以下是在 Unity 中使用多线程时需要注意的事项&#xff1a; 1. Unity 主线程限制&#xff1a; Unity 中的大部分操作必须在主线程进行&#xff0c;包括场景的修改、资源的加载、渲染…...

编程日记 2023/10/18 7:28:54

SQL Select（选择） 语法

SQL SELECT 语法 SELECT 语法用于从数据库中选择数据。 返回的数据存储在结果表中&#xff0c;称为结果集。 基本语法&#xff1a;SELECT和FROM 在任何SQL查询语句中都&#xff1a;SELECT和FROM他们必须按顺序排列。SELECT指示要查看哪些列&#xff0c;FROM标识它们所在的表。…...

编程日记 2023/10/18 7:26:52

Python武器库开发-基础篇(二)

基础篇(二) if 语句 编程时经常需要检查一系列条件&#xff0c;并据此决定采取什么措施。在Python中&#xff0c;if 语句让你能够检查程序的当前状态&#xff0c;并据此采取相应的措施 下面是一个简短的示例&#xff0c;演示了如何使用if 语句来正确地处理特殊情形。假设你有…...

编程日记 2023/10/18 7:25:50

在 CentOS 8.2 上安装 MySQL C/C++ 客户端库 libmysqlclient.so

添加 MySQL 官方 Yum 存储库&#xff1a; sudo dnf install https://dev.mysql.com/get/mysql80-community-release-el8-3.noarch.rpm 安装 MySQL C/C 客户端库&#xff1a; sudo dnf install mysql-devel 这将自动安装所需的依赖项&#xff0c;并将 libmysqlclient 库及其头…...

编程日记 2023/10/18 7:24:50

『C++ - STL』之优先级队列( priority_queue )

文章目录 前言优先级队列的结构优先级队列的模拟实现仿函数 最终代码 前言 什么是优先级队列&#xff0c;从该名中可以知道他一定有队列的一定属性&#xff0c;即先入先出(LILO)&#xff0c;而这里的优先级则可以判断出它的另一个特点就是可以按照一定的条件将符合该条件的先进…...

编程日记 2023/10/18 7:23:48

简述什么是服务端包含（Server Side Include）？

Server-side include（服务器端包括）是浏览器向服务器请求您的文档时并入您的文档的一个文件。 当访问者浏览器请求含有 include（包括）指令的文档时，服务器处理 include（包括）指令并创建新的文档，在新文档中 include（包括）指令被所包括的文件内容取代。然后服务器将此…...

编程日记 2023/10/18 7:22:47

领英如何注册？2023超全面详细教程

领英是一家面向商业用户的全球最大的职业社交网站&#xff0c;据统计&#xff0c;Linkedln用户每月与网页的交互次数超过10亿次。对于跨境人来说&#xff0c;他更是作为一个开发客户、广告营销的工具&#xff0c;被称为跨境的“风口”。 一、领英被封原因 1、IP、设备问题 1&…...

编程日记 2023/10/18 7:21:46

Spring Cloud Gateway 使用 Redis 限流使用教程

从本文开始&#xff0c;笔者将总结 spring cloud 相关内容的教程 版本选择 为了适应 java8&#xff0c;笔者选择了下面的版本&#xff0c;后续会出 java17的以SpringBoot3.0.X为主的教程 SpringBoot 版本 2.6.5 SpringCloud 版本 2021.0.1 SpringCloudAlibaba 版本 2021.0.1.…...

编程日记 2023/10/18 7:20:45

Qt事件系统 day7

Qt事件系统 day7 事件系统 在Qt中&#xff0c;事件是派生自抽象QEvent类的对象&#xff0c;它表示应用程序内发生的事情或应用程序需要知道的外部活动的结果。事件可以由QObject子类的任何实例接收和处理&#xff0c;但它们与小部件尤其相关。Qt程序需要在main()函数创建一个…...

编程日记 2023/10/18 7:18:42

微服务拆分的思考

一、前言 前面几篇文章介绍了微服务核心的两个组件&#xff1a;注册中心和网关&#xff0c;今天我们来思考一下微服务如何拆分&#xff0c;微服务拆分难度在于粒度和层次&#xff0c;粒度太大拆分的意义不大&#xff0c;粒度太小开发、调试、运维会有很多坑。 二、微服务划分…...

编程日记 2023/10/18 7:17:40

解锁AMD Ryzen全部潜力：SMUDebugTool硬件调试神器完全指南

解锁AMD Ryzen全部潜力&#xff1a;SMUDebugTool硬件调试神器完全指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https:…...

编程新知 2026/4/3 18:15:39

回表为什么慢：二级索引到聚簇索引、覆盖索引与“延迟关联”

目标&#xff1a;你能把“回表”解释成一个可量化的成本模型&#xff0c;并掌握两类实战优化&#xff1a;覆盖索引与延迟关联&#xff08;先查主键再回表&#xff09;。1. 先把概念说透&#xff1a;InnoDB 的两棵树 聚簇索引&#xff08;主键 B 树&#xff09;&#xff1a;叶子…...

编程新知 2026/4/3 17:33:14

Excel数据合并工具软件：一键汇总无压力

办公经常收到多份表格需要合并&#xff0c; Excel合并常踩坑。 单元格合表没用。 表头丢了更闹心。 为啥用它&#xff1f; 之前工具处理合并单元格失效、表头无法保留。 这款刚好补上短板。 核心功能 Excel数据合并工具。 省心好用。 核心就一事&#xff1a; 多Excel…...

编程新知 2026/4/3 17:21:03

3个步骤彻底释放惠普游戏本性能：OmenSuperHub终极指南

3个步骤彻底释放惠普游戏本性能&#xff1a;OmenSuperHub终极指南 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 还在为官方Omen Gaming Hub的臃肿体积和…...

编程新知 2026/4/3 16:22:02

优化TJpgDec在MM32F5微控制器上的图像解码性能 - 基于MindSDK的实践探索

1. TJpgDec在嵌入式系统中的独特价值 第一次接触TJpgDec是在三年前的一个智能家居项目里&#xff0c;当时需要在资源受限的STM32F407上实现图片显示功能。市面上常见的JPEG解码库要么体积庞大&#xff0c;要么对内存要求极高&#xff0c;直到发现了ChaN开发的这个轻量级解决方案…...

编程新知 2026/4/3 14:46:37

OpenClaw+Phi-3-vision-128k-instruct数据标注：半自动生成图像标签训练集

OpenClawPhi-3-vision-128k-instruct数据标注&#xff1a;半自动生成图像标签训练集 1. 为什么需要半自动数据标注 去年我在做一个宠物品种识别项目时&#xff0c;最头疼的就是数据标注环节。手动给5000多张猫狗图片打标签&#xff0c;不仅耗时耗力&#xff0c;还容易因为疲劳…...

编程新知 2026/4/3 14:27:49

三步打造个性化Android体验：从零开发Magisk主题模块

三步打造个性化Android体验&#xff1a;从零开发Magisk主题模块 【免费下载链接】Magisk The Magic Mask for Android 项目地址: https://gitcode.com/GitHub_Trending/ma/Magisk 问题导向&#xff1a;为什么需要系统主题模块&#xff1f; 你是否曾对千篇一律的Android…...

编程新知 2026/4/3 13:59:31

精准权限控制：Excel限制密码设置与使用技巧

当Excel表格发出去后&#xff0c;你是否会担心表格被随意修改&#xff1f;其实&#xff0c;Excel提供的“限制密码”就能很好的避免这个问题。下面一起来看看具体如何使用吧&#xff01;一、认识两种限制密码Excel的限制密码分为两大类&#xff1a;保护工作表和保护工作簿。前者…...

编程新知 2026/4/3 12:40:34

智能水印引擎：重新定义摄影后期效率标准

智能水印引擎&#xff1a;重新定义摄影后期效率标准 【免费下载链接】semi-utils 一个批量添加相机机型和拍摄参数的工具&#xff0c;后续「可能」添加其他功能。 项目地址: https://gitcode.com/gh_mirrors/se/semi-utils 问题发现&#xff1a;数字摄影时代的效率困境 …...

编程新知 2026/4/3 12:30:32

轻量化开源方案解放Alienware潜能：从硬件控制到场景革命

轻量化开源方案解放Alienware潜能&#xff1a;从硬件控制到场景革命 【免费下载链接】alienfx-tools Alienware systems lights, fans, and power control tools and apps 项目地址: https://gitcode.com/gh_mirrors/al/alienfx-tools 当你启动电脑却要等待臃肿的Alienw…...

编程新知 2026/4/3 11:56:12