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

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

news 2025/11/6 4:14:40

省流读法

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

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/10/15 17:59:36

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/10/31 21:17:09

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/10/31 8:56:41

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2025/11/2 8:44:52

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/9/24 1:06:11

深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

编程新知 2025/10/27 7:44:17

嵌入式面试常问问题

以下内容面向嵌入式/系统方向的初学者与面试备考者，全面梳理了以下几大板块，并在每个板块末尾列出常见的面试问答思路，帮助你既能夯实基础，又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层（Link Layer） 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

编程新知 2025/7/17 4:25:39

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...

编程新知 2025/10/13 9:33:04

Python爬虫（四）：PyQuery 框架

PyQuery 框架详解与对比 BeautifulSoup 第一部分&#xff1a;PyQuery 框架介绍 1. PyQuery 是什么&#xff1f; PyQuery 是一个 Python 的 HTML/XML 解析库&#xff0c;它采用了 jQuery 的语法风格&#xff0c;让开发者能够用类似前端 jQuery 的方式处理文档解析。它的核心特…...

编程新知 2025/8/28 1:50:49