XHR 和 Fetch 的区别

网站开发普遍采用前后端分离的模式,数据交互成为了不可或缺的关键环节。在这个过程中,XHR 和 Fetch API 是两种最常见的方法,用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式,而 Fetch API 则代表了现代 Web 开发的新兴标准。接下来,我们将一同深入学习它们的使用方法和适用场景。

XMLHttpRequest

XMLHttpRequest,通常简称为 XHR。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。XMLHttpRequest 在 AJAX 编程中(比如 jquery)被大量使用。

AJAX :异步 JavaScript 和 XML。许多人容易把它和 jq 的 ajax 混淆。它是一个技术统称,本身不是一种技术。

特点

  1. 异步请求:XHR 允许进行异步请求,它可以在后台执行,而不会阻止页面的其他操作。

  2. 支持跨域请求:通过服务器端设置允许跨域请求,从不同域的服务器获取数据。

  3. 事件驱动:提供了 onloadonerroronprogress 等一系列事件来监听请求的状态变化。

  4. 灵活性:提供了对请求头、响应头以及请求方法的完全控制,使其非常灵活。

工作原理

XHR 的工作原理主要为:

  1. 创建 XHR 对象实例:通过new XMLHttpRequest()创建一个 XHR 对象。

  2. 配置请求:使用open()方法设置请求方法(GET、POST 等)、URL,以及是否要异步执行请求。

  3. 设置回调函数:设置事件处理程序来处理请求完成、成功、失败等不同的状态。

  4. 发起请求:使用send()方法发送请求。

  5. 处理响应:在事件处理程序中处理响应数据,通常使用responseTextresponseXML来访问响应内容。

// 创建一个新的XHR对象
const xhr = new XMLHttpRequest();// 配置请求
xhr.open("GET", "https://api.baidu.com/test", true);// 设置响应处理函数
xhr.onload = function() {if (xhr.status === 200) {// 请求成功const responseData = xhr.responseText;console.log("成功获取数据:", responseData);} else {// 请求失败console.error("请求失败,状态码:" + xhr.status);}
};// 发起请求
xhr.send();

XHR 的响应处理通常在onreadystatechange事件处理程序中完成。在上面的例子中,我们等待 XHR 对象的状态变为 4(表示请求完成)并且 HTTP 状态码为 200(表示成功响应)时,解析响应数据。

Fetch API

Fetch 是一种现代的数据网络请求 API,它旨在解决 XHR 的一些问题,提供了更强大、更灵活的方式来处理 HTTP 请求。可以理解为 XMLHttpRequest 的升级版。

特点

  1. Promise 风格:Fetch API 使用 Promise 对象来处理异步请求,使代码更具可读性和可维护性。

  2. 更简单的语法:相较于 XHR,Fetch API 的语法更加简单明了,通常只需要几行代码来完成请求。

  3. 默认不接受跨域请求:为了安全性,Fetch API 默认不接受跨域请求,但可以通过 CORS(跨域资源共享)来进行配置。

  4. 更现代的架构:Fetch API 是建立在 Promise 和 Stream 之上的,支持更灵活的数据处理和流式传输。

工作原理

Fetch 的工作原理主要为:

  1. 使用fetch()函数创建请求:传入要请求的 URL,以及可选的配置参数,例如请求方法、请求头等。

  2. 处理响应:fetch()返回一个 Promise,您可以使用.then()链式调用来处理响应数据,例如使用.json()方法解析 JSON 数据或.text()方法获取文本数据。

  3. 错误处理:您可以使用.catch()方法来捕获任何请求或响应的错误。

  4. 使用async/await:如果需要,您还可以使用async/await来更清晰地处理异步操作。

Fetch API 的特性和简单的语法使它在许多前端项目中成为首选工具。然而,它也有一些限制,例如不支持同步请求,因此需要谨慎使用。

fetch("https://api.baidu.com/test").then(response => {if (!response.ok) {throw new Error("请求失败,状态码:" + response.status);}return response.json();}).then(data => {// 请求成功,处理响应数据console.log("成功获取数据:", data);}).catch(error => {// 请求失败,处理错误console.error(error);});

XHR 和 Fetch 的对比

XHR 和 Fetch 都用于进行 HTTP 请求,但它们之间存在一些关键区别:

  • 语法: Fetch 使用 Promise,更直观和易于理解。

  • 跨域请求: Fetch 在跨域请求方面更灵活,支持 CORS。

  • 流式传输: Fetch 支持可读流,适用于大文件下载。

  • 维护性: Fetch 更容易维护和扩展。

常用库和插件

基于 XHR 封装的库

  • jquery:一个 JavaScript 库,提供了用于处理 DOM 操作、事件处理和 XHR 请求的便捷方法。

  • axios:一个流行的 HTTP 请求库,基于 XHR 开发,支持浏览器和 Node.js。

基于 fetch 封装的库

  • redaxios:它具有与 axios 类似的 API,但更轻量级且适用于现代 Web 开发。

  • umi-request:由 Umi 框架维护的网络请求库,提供了强大的拦截器、中间件和数据转换功能。

总结

XMLHttpRequest (XHR) 和 Fetch API 都是前端开发中用于进行数据请求的有力工具。XHR 在传统项目中仍然有用,而 Fetch API 则在现代 Web 开发中越来越流行。具体选择哪个工具取决于项目的需求和开发团队的偏好。

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

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

相关文章

scipy笔记:scipy.interpolate.interp1d

1 主要使用方法 class scipy.interpolate.interp1d(x, y, kindlinear, axis-1, copyTrue, bounds_errorNone, fill_valuenan, assume_sortedFalse) 2 主要函数 x一维实数值数组,代表插值的自变量y N维实数值数组,其中沿着插值轴的 y 长度必须等于 x 的…

Linux:使用pv实现执行进度监控

pv全称:Pipe Viewer,通过管道显示数据处理进度的信息 安装 yum install pv -y示例 复制文件 # 显示进度 pv data.sql > ./data-new.sql330MiB 0:00:00 [1.32GiB/s] [>] 100%限制mysql数据导出速率 mysqldump | pv -L10m > data.sql# -L, -…

gitlab注册无中国区电话验证问题

众所周知gitlab对中国区不友好,无法直接注册,页面无法选择86的手机号进行验证码发送。 Google上众多的方案是修改dom,而且时间大约是21年以前。 修改dom,对于现在的VUE、React框架来说是没有用的,所以不用尝试。 直接看…

Docker 安装 Nacos

Docker 安装 Nacos tags: docker Nacos 文章目录 Docker 安装 Nacostags: docker Nacos 下载镜像docker 运行命令说明 Nacos 端口说明 下载镜像 下载镜像 # 搜索镜像 docker search nacos # 下载镜像 dockers pull nacos/nacos-server创建挂载文件夹 # 存放日志 mkdir naco…

Linux结束程序运行的命令

kill 通过进程 ID(PID)结束一个程序的运行。例如,要结束进程 ID 为 1234 的进程: kill 1234 pkill 通过进程名称结束一个程序的运行。例如,要结束名称为example_process的进程: pkill example_process …

postman参数为D:\\audio\\test.mp3请求报错

报错信息 报错 java.lang.IllegalArgumentException: Invalid character found in the request target [/v1/audio/transcriptions?audioPathD:\\audio\\test.mp3 ]. The valid characters are defined in RFC 7230 and RFC 3986 解决方式 yml文件上放行指定字符 relaxed-pa…

Mac电脑每次修改完java的版本后,没有成功

问题&#xff0c;本地有多个java版本8,11,15,17但是每次执行代码后&#xff0c;版本没有变化。在环境变量文件.bash_profile中设置无效 export JAVA_HOME/Library/Java/JavaVirtualMachines/<Java版本目录>/Contents/Home 这个问题通常是由于系统默认使用的Shell不同导…

安装获取mongodb

目录 本地安装 获取云上资源 获取Atlas免费数据库 本地连接数据库 在Atlas中连接数据库 本文适合初学者或mongodb感兴趣的同学来准备学习测试环境&#xff0c;或本地临时开发环境。mongodb是一个对用户非常友好的数据库。这种友好&#xff0c;不仅仅体现在灵活的数据结构和…

力扣:191. 位1的个数(Python3)

题目&#xff1a; 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 J…

评论功能实现方案

构建高效且安全的评论功能&#xff1a;实现方案探讨。 1、分析 我们以b站的评论为例&#xff0c;用下图来解释我们评论的分级。 我们可以抽出存储评论的数据表属性 评论id父级id评论作者id被回复用户ID评论帖子ID评论内容创建时间 可以设计如下的数据表 其中pid表示父id。 …

考研失利后,我是如何零基础转行测试开发 ,成功拿下独角兽公司offer?

想当年&#xff0c;从一个什么都不懂的非科班测试小白&#xff0c;考研失利后&#xff0c;转行到K12教育知名互联网公司做测试开发工程师&#xff0c;我用了大概半年的时间。 这个过程中我自己也摸索出了一条学习路线&#xff0c;在这里想给大家分享一下我的学习路线&#xff…

EasyExcel list<Map>批量导出多个sheet

1 列表List<Map<String,Object>> list 按类型分模块分别导出到各自sheet 2 首先获取列表 List<Map<String,Object>> list tzBusiTaskUserListService.getTaskUserList(tzBusiTaskUserList); 3 分组 Map<String,List<Map<String,Object&g…

Hadoop学习笔记(HDP)-Part.16 安装HBase

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

vue3 vue-router过渡动效 滚动行为 (四)

文章目录 一、过渡动效1.1安装animate.css1.2 利用元信息存储过渡名称1.3 在组件中使用 二、滚动行为2.1 始终滚动到顶部2.2 相对于某个元素的偏移量2.3 保持之前的滚动位置 一、过渡动效 1.1安装animate.css npm install animate.css --save1.2 利用元信息存储过渡名称 {pa…

ROS opencv PCL Ceres-solver之间版本对应关系

ROS1 : neotic Opencv : 4.6.0 Ceres-solver : 2.0.0

ABAP 报表工具栏缺少小计按钮

解决方案&#xff1a; 在sap标准程序 SAPLKKBL 中有多个标准的的状态栏 都有小计按钮 复制过来之后却不显示&#xff0c;调试发现&#xff0c; 在 pf_status_alv里面做了excluding &#xff0c;需要把小计排除 调试RT_EXTAB. 说明程序默认给隐藏了 不显示&#xff0c;删除调…

教你用Python+selenium搭建自动化测试环境

一、环境搭建 1、安装pythonpycharm软件 。python安装网址官网&#xff1a;About Python™ | Python.org 根据自己的电脑系统选择最新版本 下载到本地&#xff0c;选择安装路径并配置好环境变量 验证安装是否成功 搜索中录入cmd 打开命令窗口 录入python显示一下版本号表示…

微服务实战系列之Cache(技巧篇)

前言 凡工具必带使用说明书&#xff0c;如不合理的使用&#xff0c;可能得到“意外收获”。这就好比每个人擅长的领域有所差异&#xff0c;如果放错了位置或用错了人&#xff0c;也一定会让 Leader 们陷入两难之地&#xff1a;“上无法肩负领导之重托&#xff0c;下难免失去伙伴…

软件测试基础知识总结

之前有将基础的软件测试知识做了一个总结&#xff0c;但比较潦草&#xff0c;很多内容只是一笔带过&#xff0c;快到年底了&#xff0c;自己也有个写年终知识总结文档的计划&#xff0c;就将基础的理论知识重新整理一番。 有人问我&#xff0c;这些都是能搜索到的知识&#xf…

用IDEA创建Java类时自动生成作者注释等信息

File->settings-->Editor->File and Code Templates->Includes->File Header(双击)&#xff0c;然后在右边输入框内输入代码即可 /*** Author 作者名* Date ${DATE} ${TIME}* version 1.0* 注释*/