AJAX和XHR、fetch、axios的关系

AJAX中有两套原生的API,一个是XHR(XMLHttpRequest),一个是Fetch API

axios是第三方库,在浏览器环境中使用的是XHR

umi-request也是第三方库,在浏览器环境中使用的是Fetch

在 AJAX(Asynchronous JavaScript and XML)中,原生的 API 主要有两种:XMLHttpRequest(简称 XHR)和Fetch API。这两者都用于在客户端与服务器之间进行异步通信,但它们有一些关键的区别,尤其是在使用方式、功能和灵活性上。以下是两者的详细比较和作用。

1.XMLHttpRequest(XHR)

XMLHttpRequest 是最早用于在浏览器中执行异步 HTTP 请求的 API,通常用于实现 AJAX 请求。它自 1999 年起就已被引入,长期以来是进行异步请求的标准方法。

主要特点:

- 语法复杂:使用起来相对较复杂,需要更多的配置和回调函数来处理请求的各个阶段(如发送请求、接收响应等)。

- 回调函数:它使用回调函数来处理异步响应,需要监听onreadystatechange 事件,或使用onload、onerror 等事件处理程序来处理响应。

- 支持的请求类型:XMLHttpRequest 支持多种 HTTP 请求方法(如GET、POST、PUT、DELETE 等)。

- 支持同步和异步请求:可以选择同步(阻塞)或异步(非阻塞)请求,但同步请求会导致浏览器冻结,影响用户体验,因此通常不推荐使用同步请求。

- 支持跨域请求:通过XMLHttpRequest 进行跨域请求时,需要使用 CORS(跨域资源共享)机制。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // true表示异步请求xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {console.log("Response:", xhr.responseText); // 处理响应数据} else {console.error("Request failed with status:", xhr.status);}}
};xhr.send(); // 发送请求

优缺点:

- 优点:

- 支持所有主流浏览器。

- 可以处理复杂的请求场景。

- 缺点:

- 使用起来较为复杂,需要手动管理事件和回调。

- 不支持 Promise,需要额外处理异步操作。

---

2.Fetch API

Fetch API 是现代浏览器中新加入的用于发起网络请求的 API,相比XMLHttpRequest,Fetch 提供了更简洁、更强大的语法,并且它基于 Promise,支持更直观的异步操作。

主要特点:

- 基于 Promise:Fetch API 基于 Promise,这使得异步操作更加简洁和灵活。可以通过then() 和catch() 方法处理请求结果和错误。

- 默认异步:Fetch 请求默认是异步的,因此不会阻塞线程,也没有必要手动设置异步标志。

- 不支持同步请求:与XMLHttpRequest 不同,Fetch 不支持同步请求,始终是异步的。

- 响应处理:Fetch 返回的响应对象提供了更丰富的方法来处理响应数据,例如可以方便地将响应解析为 JSON、文本、二进制数据等。

- 支持 CORS:Fetch 与XMLHttpRequest 一样,支持跨域请求,但其跨域配置更加简洁。

示例代码:

fetch("https://api.example.com/data").then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析为 JSON}).then(data => {console.log("Response data:", data); // 处理数据}).catch(error => {console.error("There was a problem with the fetch operation:", error);});

优缺点:

- 优点:

- 基于 Promise,代码更加简洁、易于理解和维护。

- 更好地支持现代 JavaScript 的异步操作(如 async/await)。

- 对于响应处理(如 JSON 解析)更加方便和灵活。

- 缺点:

- 不支持较旧的浏览器(如 IE)。不过可以通过 polyfill 进行兼容。

- 需要手动处理 HTTP 错误(fetch 仅在网络失败时抛出错误,HTTP 错误状态(如 404、500)不会抛出异常)。

---

3. 关键区别

特性

XMLHttpRequest

Fetch API

API 风格

基于事件回调和状态变化

基于 Promise,支持 thencatch 语法

默认异步

支持同步和异步(不推荐使用同步)

始终为异步

响应处理

使用 xhr.responseText,需要手动解析数据

支持直接解析为 JSON、文本、二进制等

支持的功能

需要手动设置跨域(CORS)、状态检查等

自动处理跨域,默认遵循 CORS 标准

错误处理

需要监听 onerroronreadystatechange 事件

只会在网络错误时抛出异常,需要手动处理 HTTP 错误

支持的浏览器

广泛支持(包括较旧的浏览器)

主要支持现代浏览器,需要 polyfill 来兼容旧版浏览器

同步请求

支持(但不推荐)

不支持同步请求

功能点:

4. 总结

-XMLHttpRequest 是传统的 API,适合处理兼容性要求较高的项目,但使用起来较为繁琐,特别是处理回调和异步操作时。

-Fetch API 是现代的、基于 Promise 的 API,提供了更简洁的语法,易于使用,尤其是与async/await 结合使用时,代码更加清晰和可维护。不过,它不支持同步请求,并且需要现代浏览器支持。

因此,现代 Web 开发中,Fetch API 更为推荐,特别是当你的目标浏览器支持它时。如果需要兼容老旧浏览器,可能仍然需要使用XMLHttpRequest 或结合使用 polyfill 来实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/486156.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sarcomere仿人灵巧手ARTUS,20个自由度拓宽机器人作业边界

Sarcomere Dynamics 是一家深度技术先驱,通过开发和商业化仿人机械来改变机器人行业。专注于为科研人员,系统集成商和制造商提供更实惠、更轻便且更灵活的末端执行器替代品。凭借创新的致动器技术,创造了一款紧凑、轻便且非常坚固的机械手Art…

【Python库安装】Python环境安装hdf4处理库pyhdf

目录 pyhdf库简介功能简介 pyhdf库安装1. 使用 pip 安装(推荐方法)2. 从源码安装3. conda安装 参考 pyhdf库简介 pyhdf 是一个 Python 库,用于读取和处理 HDF4 格式的文件(注意:HDF5 格式文件需要用 h5py 库&#xff…

34.1 uber开源的m3db简介

本节重点介绍 : m3db自己的定位m3db自己的架构m3db自己的组件 两句话简介 M3最初是在优步开发的,目的是提供对优步业务运营,微服务和基础架构的可视性由于M3具有轻松进行水平扩展的能力,因此它为所有监视用例提供了一个集中式存储解决方案…

WebSocket 通信说明与基于 ESP-IDF 的 WebSocket 使用

一、 WebSocket 出现的背景 最开始 客户端(Client) 和 服务器(Server) 通信使用的是 HTTP 协议,HTTP 协议有一个的缺陷为:通信只能由客户端(Client)发起。 在一些场景下&#xff0…

OpenSSL 自建CA 以及颁发证书(网站部署https双向认证)

前言 1、前面写过一篇 阿里云免费ssl证书申请与部署,大家可以去看下 2、建议大家看完本篇博客,可以再去了解 openssel 命令 openssl系列,写的很详细 一、openssl 安装说明 1、这部分就不再说了,我使用centos7.9,是自…

使用javaScript生成随机迷宫

效果预览 我制作了一个 CodePen,以动画形式展示随机迷宫的创建过程,以便更加直观的观察算法的工作原理。(点击即可访问生成新迷宫) 基本思路 使用javaScript生成随机迷宫的核心思想是使用一个“深度优先搜索”(DFS&a…

【ArkTS】列表组件的“下拉刷新”和“上拉加载”

系列文章目录 【ArkTS】关于ForEach的第三个参数键值 【ArkTS】“一篇带你读懂ForEach和LazyForEach” 【小白拓展】 【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案” 【ArkTS】 一篇带你掌握“语音转文字技术” --内附详细代码 【ArkTS】技能提高–“用户授权”…

Java项目实战II基于微信小程序的消防隐患在线举报系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着城市化进程的加快&…

每日十题八股-2024年12月7日

1.说说hashmap的负载因子 2.Hashmap和Hashtable有什么不一样的?Hashmap一般怎么用? 3.ConcurrentHashMap怎么实现的? 4.分段锁怎么加锁的? 5.分段锁是可重入的吗? 6.已经用了synchronized,为什么还要用CAS呢…

CTF学习24.11.19[音频隐写]

MISC07[音频隐写] 隐写术 隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。隐写术的英文叫做Steganography,来源于特里特米乌斯的一本讲述密码学与隐写术的著作Steganograp…

掌握谈判技巧,达成双赢协议

在当今竞争激烈且合作频繁的社会环境中,谈判成为了我们解决分歧、谋求共同发展的重要手段。无论是商业合作、职场交流,还是国际事务协商,掌握谈判技巧以达成双赢协议都具有极其关键的意义。它不仅能够让各方在利益分配上找到平衡点&#xff0…

HTTPS的工作过程

1.HTTPS协议原理 1.1HTTPS协议的由来 HTTP在传输网络数据的时候是明文传输的,信息容易被窃听甚至篡改,因此他是一个不安全的协议(但效率高)。在如今的网络环境中,数据安全是很重要的(比如支付密码又或者各…

鸿蒙UI开发——渐变色效果

1、概 述 ArkTs可以通过颜色渐变接口,设置组件的背景颜色渐变效果,实现在两个或多个指定的颜色之间进行平稳的过渡。 目前提供三种渐变类型:线性渐变、角度渐变、径向渐变。 我们在鸿蒙UI布局实战 —— 个人中心页面开发中,默认…

距离与AoA辅助的三维测距算法(适用于四个基站的情况的单点定位),MATLAB代码

本MATLAB 代码实现了一个基于LOS/NLOS混合环境的单点定位系统,主要用于估计目标物体的单点位 文章目录 代码运行结果源代码代码功能概述主要步骤分析初始化部分 绘图与输出 代码运行结果 定位结果如下: 命令行的坐标和误差输出: 部分代码…

Vue指令(一)--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

目录 (一)初识指令和内容渲染指令v-html 1.v-html 案例: 官网的API文档 (二)条件渲染指令v-show和v-if 1. v-show 2. v-if (三)条件渲染指令v-else和v-else-if 案例 (四…

记一次由docker容器使得服务器cpu占满密码和密钥无法访问bug

Bug场景: 前几天在服务器上部署了一个免费影视网站,这个应用需要四个容器,同时之前的建站软件workpress也是使用docker部署的,也使用了三个容器。在使用workpress之前,我将影视软件的容器全部停止。 再使用workpress…

【JavaEE 进阶(一)】SpringBoot(上)

博主主页: 33的博客 文章专栏分类:JavaEE ??我的代码仓库: 33的代码仓库?? ???关注我带你了解更多进阶知识 目录 1.前言2.Spring3.第一个SpringBoot程序4.Spring MVC 4.1建立连接 4.1.1RequestMapping使用 4.2请求 4.2.1传递单个参数4.2.2传递多个参数4.2.3传递一个对象…

(未更新完)day30-IO-阶段综合案例(带权重的随机每日一记)(笔记完全来源于黑马程序员)

目录 0 目录一、听黑马阿玮的视频记录的笔记1. 制造假数据1.1 如何制造假数据1.2 练习1-生成方式1:爬取姓氏、男生名字、女生名字1.3 练习2-生成方式1:在练习1的基础上,将数据写入本地文件1.4 练习3-生成方式2:利用糊涂包生成假数…

FPGA中所有tile介绍

FPGA中包含的tile类型,以xinlinx 7k为例,可以通过f4pga项目中的原语文件夹查看,主要包含以下这些: 以下是您提到的 Xilinx 7 系列 FPGA 中各种模块的含义及用途: 1. BRAM (Block RAM) BRAM 是 FPGA 中的块存储资源&…

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出?二、解决堆内存溢出措施三、堆内存参数应该怎么调整?四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后,JMeter日志窗口报错“java.lang.OutOfMe…