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

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

news 文章来源：https://blog.csdn.net/fangyuan__/article/details/133861806 2025/4/29 20:38:19

省流读法

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

DateUtil工具类记录

为支持日常工作需要&#xff0c;记录所用到的一些关于时间的工具类方法。随时进行补充。 /*** Description:获取两个日期之间的天数差* Author:hanyq* Date:2023/9/19 11:23*/public static int getDateDifference(Date startDate,Date endDate){int days 0;try {Calendar st…...

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

可信执行环境简介：ARM 的 TrustZone

目录 可信执行环境安全世界与普通世界 - 上下文切换机制ARMv7 中的异常处理ARMv8 中的异常处理 信任区商业实施TrustZone 本身的漏洞高通Trustonic 信任区强化的弱点结论声明 可信执行环境 具有信任区的 ARM 处理器实现了架构安全性每个物理处理器内核提供两个虚拟的扩展 核心…...

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

【音视频流媒体】 3、ffmpeg、ffplay、ffprobe 超详细介绍

文章目录 一、ffmpeg1.1 安装1.2 基本参数 二、ffprobe2.1 查编码格式2.2 查视频时长 五、视频转流5.1 MP4转H2645.2 H264转MP45.3 AVI转MP45.4 MP4转H265 六、视频文件6.1 播放6.2 filter 过滤器6.2.1 crop 6.3 视频截取6.4 视频拼接6.5 获取分辨率 七、视频和图7.1 视频抽帧7…...

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

解决kong部署自定义插件报 helloworld plugin is enabled but not installed

背景 我使用的是docker环境部署&#xff0c;使用的是自定义挂载plugins路径 -e "KONG_LUA_PACKAGE_PATH/plugins/?.lua" \ -v "/plugins:/plugins" \ -e "KONG_PLUGINSbundled,helloworld" \但是当我只需docker run的时候就报错 [error] 1#0:…...

编程日记 2023/10/18 7:12:35

动态数据源自定义SqlSessionFactoryBean时mybatis plus配置失效

环境&#xff1a; 动态数据源spring-boot 2.7.15mybatis-plus 3.5.2 yaml配置&#xff1a; spring:datasource:db100:username: xxxpassword: xxxjdbc-url: jdbc:kingbase8://xxx.xxx.xxx.xxx:54321/100driver-class-name: com.kingbase8.Driver# url: jdbc:postgresql://xxx…...

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

【Qt控件之QDialogButtonBox】概述及使用

概述 QDialogButtonBox类是一个小部件&#xff0c;它以适合当前小部件样式的布局呈现按钮。 对话框和消息框通常以符合该台界面指南的布局呈现按钮。不同的平台会有不同的对话框布局。QDialogButtonBox允许发人员向其添加按钮&#xff0c;并将自使用用户的桌面环境所适合的布局…...

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

IPv6知识概述 - ND协议

IPv6知识概述 - ND协议 参考文章&#xff1a;https://blog.csdn.net/Gina_wj/article/details/106708770 IPv6基础篇&#xff08;四&#xff09;&#xff1a;邻居发现协议NDP ND协议功能概述 ND&#xff08;Neighbor Discovery&#xff0c;邻居发现&#xff09;协议是IPv6的…...

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

react-redux的connect函数实现

react-redux对store订阅的实现原理&#xff1a; storeContext.js import { createContext } from "react";export const StoreContext createContext() connect.js import React, { PureComponent } from react // import store from ../../store; import {Stor…...

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

Vue3使用Vite创建项目

node版本&#xff1a;node -v v18.16.0 npm版本: npm -v 9.5.1 Vite Vite&#xff1a;是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验 脚手架&#xff0c;创建Vue项目&#xff0c;替代 Vue-cli 基于Vite创建vue项目&#xff1a; 1.npm create vitelatest 2.完…...

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

NCV7724DQBR2G车规级半桥电机驱动芯片-专为汽车，工业自动化应用提供完美解决方案

车规级半桥电机驱动芯片是一种用于驱动直流电机的芯片&#xff0c;常用于电动汽车、电动自行车等领域。它可以控制电机的转速和方向&#xff0c;并且具有过流保护、过温保护等功能&#xff0c;可以保证电机的安全运行。 NCV7724DQBR2G是一款车规级八通道半桥驱动器&#xff0c;…...

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