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.mzph.cn/web/62282.shtml

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

相关文章

openlayers地图缓存添加

//通过安装包localforage(npm install localforage)或https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js tileCacheStore.js import localforage from localforage var tileCacheStorenull;// 从缓存中获取该瓦片 functio…

云轴科技ZStack出席中国电信国际EMCP平台香港发布会,持续推动海外合作

近日,以“云聚未来 翼起新篇”为主题的中国电信国际多云服务一站式平台(E-surfing Managed Cloud Platform,简称EMCP平台)新闻发布会在香港成功举办,标志着中国电信国际在云计算服务领域取得了又一重大进展。云轴科技…

2024.11.29——[HCTF 2018]WarmUp 1

拿到题&#xff0c;发现是一张图&#xff0c;查看源代码发现了被注释掉的提示 <!-- source.php--> step 1 在url传参看看这个文件&#xff0c;发现了这道题的源码 step 2 开始审计代码&#xff0c;分析关键函数 //mb_strpos($haystack,$needle,$offset,$encoding):int|…

brpc的二次封装以及brpc与etcd的联合

目的&#xff1a; 搭配etcd的注册中心管理能知道谁能提供什么服务&#xff0c;并用rpc进行服务调用 封装思想&#xff1a; 信道管理&#xff0c;将不同服务主机的通信信道管理起来 封装&#xff1a; 1.指定的信道管理类 一个服务通常会有多个节点&#xff0c;每个节点都会…

【提升效率】如何写好一份详细设计文档

版本日期修订人描述V1.02024/12/6nick huang创建文档 背景 CSDN在发起“如何做好一份技术文档”的活动。 想起我最近在写一份详细设计&#xff0c;有一些感受&#xff1a; 一份考虑较周全的“详细设计文档模板”能起到质量保底的作用。 当一名初级技术人员需要编写详细设计文…

电阻计RM3544、RM3545的使用

目录&#xff1a; 一、电阻计与PC通讯 1、硬件连接 2、RmLogger.exe的使用 二、RM3545测量35uΩ电阻 一、电阻计与PC通讯 1、硬件连接 可以设置USB或COM口(串口)连接PC&#xff0c;也可以设置为“打印”输出。 1&#xff09;使用USB连接PC 2&#xff09;使用串口连接PC …

Jenkins 的HTTP Request 插件为什么不能配置Basic认证了

本篇遇到的问题 还是因为Jenkins需要及其所在的OS需要升级&#xff0c;升级策略是在一台新服务器上安装和配置最新版本的Jenkins&#xff0c; 当前的最新版本是&#xff1a; 2.479.2 LTS。 如果需要这个版本的话可以在官方站点下载&#xff0c;也可以到如下地址下载&#xff1…

uniapp 封装自定义头部导航栏

封装原因 项目中有时候需要使用自定义的头部导航栏&#xff0c;原生的无法满足需求 参数 属性名描述示例title标题字符串&#xff1a;首页bgColor背景色字符串&#xff1a;#ffftype左侧的操作内容字符串&#xff1a;all&#xff0c;详细值请在下方查看 参数解释 type all…

docker学习笔记(五)--docker-compose

文章目录 常用命令docker-compose是什么yml配置指令详解versionservicesimagebuildcommandportsvolumesdepends_on docker-compose.yml文件编写 常用命令 命令说明docker-compose up启动所有docker-compose服务&#xff0c;通常加上-d选项&#xff0c;让其运行在后台docker-co…

Linux中inode

磁盘的空间管理 如何对磁盘空间进行管理&#xff1f; 假设在一块大小为500G的磁盘中&#xff0c;500*1024*1024524288000KB。在磁盘中&#xff0c;扇区是磁盘的基本单位&#xff08;一般大小为512byte&#xff09;&#xff0c;而文件系统访问磁盘的基本单位是4KB&#xff0c;因…

5G扬帆乘劲风,遨游通讯赋能千行百业谱新篇

在大型工厂&#xff0c;轻触手机屏幕&#xff0c;实时库存数据、人员定位等信息便跃然眼前、一目了然&#xff1b;在边远油田&#xff0c;动动手指&#xff0c;即可实时查询设备温度、危险气体浓度等信息&#xff0c;大数据瞬间尽在“掌”握……在遨游5G防爆智能手机的助力下&a…

RT Thread Studio新建STM32F407IG工程文件编译提示错误

编译提示错误 原因: RT 源码使用4.0.3的话&#xff0c;请用STM32F4支持包的0.2.2版本&#xff0c;就不会出错了。 如果支持包用0.2.3版本的话&#xff0c;需要用RT内核4.1.0版本。0.2.3 版本更新了一些针对内核4.1.0的驱动代码&#xff0c;这几个定义都是4.1.0里的。

学生管理系统(java)

1.前期准备 &#xff08;1&#xff09;新建java项目 &#xff08;2&#xff09;新建java软件包以及三个文件Student.java,Student.txt,StuSystem.java Student.java package student_management_system;public class Student {private String id;private String name;private…

JavaWeb学习(2)(Cookie原理(超详细)、HTTP无状态)

目录 一、HTTP无状态。 &#xff08;1&#xff09;"记住我"&#xff1f; &#xff08;2&#xff09;HTTP无状态。 &#xff08;3&#xff09;信息存储客户端中。如何处理&#xff1f; 1、loaclStorage与sessionStorage。 2、Cookie。 二、Cookie。 &#xff08;1&…

SpringBoot教程(三十二) SpringBoot集成Skywalking链路跟踪

SpringBoot教程&#xff08;三十二&#xff09; | SpringBoot集成Skywalking链路跟踪 一、Skywalking是什么&#xff1f;二、Skywalking与JDK版本的对应关系三、Skywalking下载四、Skywalking 数据存储五、Skywalking 的启动六、部署探针 前提&#xff1a; Agents 8.9.0 放入 …

flask创建templates目录存放html文件

首先&#xff0c;创建flask项目&#xff0c;在pycharm中File --> New Project&#xff0c;选择Flask项目。 然后&#xff0c;在某一目录下&#xff0c;新建名为templates的文件夹&#xff0c;这时会是一个普通的文件夹。 然后右击templates文件夹&#xff0c;选择Unmark as …

Java进阶(注解,设计模式,对象克隆)

Java进阶(注解&#xff0c;设计模式&#xff0c;对象克隆) 一. 注解 1.1 什么是注解 java中注解(Annotation)&#xff0c;又称java标注&#xff0c;是一种特殊的注释 可以添加在包&#xff0c;类&#xff0c;成员变量&#xff0c;方法&#xff0c;参数等内容上 注解会随同…

部署loki,grafana 以及springcloud用法举例

文章目录 场景docker 部署grafanadocker-compose部署loki维护配置文件 local-config.yaml维护docker-compose.yml配置启动 grafana 添加loki数据源springcloud用法举例查看loki的explore,查看日志 场景 小公司缺少运维岗位&#xff0c;需要研发自己部署日志系统&#xff0c;elk…

keil报错---connection refused due to device mismatch

解决办法如下&#xff1a; 记得改成1 把Enable取消

第三节、电机定速转动【51单片机-TB6600驱动器-步进电机教程】

摘要&#xff1a;本节介绍用定时器定时的方式&#xff0c;精准控制脉冲时间&#xff0c;从而控制步进电机速度 一、计算过程 1.1 电机每一步的角速度等于走这一步所花费的时间&#xff0c;走一步角度等于步距角&#xff0c;走一步的时间等于一个脉冲的时间 w s t e p t … ……