fetch、axios 和 XMLHttpRequest 的异同

已于 2022-10-09 10:01:08 修改
阅读量3.2k 收藏 1
点赞数
分类专栏： JavaScript 浏览器规范 ES6 文章标签： fetch axios XMLHttpRequest 异同
于 2019-09-09 16:42:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_yu_liu/article/details/100666516
版权

xhr

XMLHttpRequest 文档
特点：

  • 所有浏览器都支持 onreadystatechange
  • 更多现代浏览器，除了可以设置 on* 属性外，也可以用 addEventListener来监听XMLHttpRequest 事件。
  • 可以终止

方法特征：
open：第三个参数async ，表示是否异步。默认true。

axios

axios 文档
特点：

  • 基于xhr
  • 基于promise
  • 支持node
  • 请求拦截
  • 防御xsrf(跨站域请求伪造)

fetch

fetch文档
特点：

  • Fetch是浏览器原生的 api，低版本浏览器不支持
  • 返回promise
  • 仅当网络故障时或请求被阻止时，才会标记为 reject。
  • 不会接受跨域 cookies；
  • 默认fetch 不会发送 cookies
大刘鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
axios-fetch-adapter:提取适用于axios的适配器
05-10
我将在Web应用程序中采用PWA，并且这些Web应用程序大量使用带有默认XMLHTTPRequest适配器的Axios。 因此，我必须切换到Fetch适配器； 但是，Axios目前没有用于提取API的适配器。 因此，我在等待Axios正式发布时编写...
http-browser-comparison:superagent、axios 和 XMLHttpRequest 的比较
06-14
在这个领域，有多种库和API可供JavaScript开发者使用，其中“superagent”、“axios”和“XMLHttpRequest”是非常知名的三种。本篇文章将深入探讨它们的特性、优缺点以及在实际项目中的应用。 首先，`superagent`是...
Axios总结
Heidi
08-19 1056
网络请求 ——> axios ——> 请求拦截器 ——> 服务器 网络请求 ——> axios ——> 响应拦截器 ——> 服务器
XMLHttpRequest、ajax、Promise、axios、async await
qq_43667537的博客
03-04 1189
xhr是浏览器提供的js对象，通过它来向服务器来请求资源。jquery中的Ajax是基于xhr对象来封装资源的数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。
XMLHttpRequest与Axios详解
最新发布
警警的博客
05-10 738
XMLHttpRequest与Axios详解
Ajax、XMLHttpRequest、Axios 和 Fetch有何异同
XNHYJSL的博客
05-30 274
更加直观地呈现 Ajax、XMLHttpRequest、Axios 和 Fetch 的区别，请看表格。工具定义特点区别Ajax一种使用 JavaScript 进行异步数据交互的技术和概念。前端通信的思想和模式，可以使用多种工具来实现。无法直接使用，需要借助其他工具或框架来实现。由浏览器提供的原生 API，用于发送 HTTP 请求并接收响应。支持多种请求方式（GET、POST、PUT、DELETE 等），对请求和响应进行详细的控制和定制。需要手动设置请求头信息，不能自动解析响应数据格式。
AJAX--XMLHttpRequest & 跨域
郊眠寺
05-18 7018
XMLHttpRequest XMLHttpRequest 是浏览器内置的一个构造函数 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！ 使用 XMLHttpRequest 发起 GET 请求 主要的 4 个实现步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函
基于axios封装fetch方法及调用实例
08-28
为了解决这些问题，开发者们通常会对fetch方法进行封装，使用axios库来实现更加强大和灵活的数据请求功能。 在本文中，我们将基于axios封装fetch方法，并提供一个实例来演示如何使用该方法。我们首先需要安装axios...
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的...
复习AJAX03 -axios 拦截器,文件上传,XMLHttpRequest
vip77778888的博客
01-11 560
拦截器,文件上传,XMLHttpRequest,JSON 用法
Axios cancelToken学习使用
Vgbire的博客
10-12 6600
参考axios官网 官网的有点难理解，自己看官方文档也搞了好久才明白，以下是我的总结。 axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式 axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里.
axios、ajax、xhr、xml、http你都懂了吗？
m0_61835344的博客
04-07 2420
文章目录一、一般请求和ajax请求1、ajax请求的优势和劣势：2、ajax请求的请求过程和工作原理：3、常见四种请求方式：4、详解GET请求和POST请求参数类型和数据格式：二、ajax和xhr你需要知道的1、XHR是ajax的基础2、手写ajax3、番外之readyState的五个值:三、axios的理解和使用1、 axios是什么?2、 axios特点3、使用axios发ajax请求四、axios常用API1、axios.create(config)2、拦截器函数/ajax请求/请求的回调函数的调用.
通过阅读axios源码重新学习AJAX和XMLHttpRequest
MPFLY的博客
07-08 688
今天单位活儿比较少，遂打开了axios源码阅读了一番。 照着axios的文档进行阅读，事半功倍。一边看源码，一边又顺着把AJAX和XMLHttpRequest看了一遍，以下是我的收获。 由于XMLHttpRequest很长，我们一般将其简称为XHR，下面我将会使用简称进行书写。 1. axios和AJAX的区别 在写详细的文章之前，可能很多同学不是很清楚axios和ajax的区别（清楚的同学可略过~????），下面我们来简单讨论一下。 AJAX = Asynchronous JavaScript an
异步请求-XMLHttpRequest、ajax、axios原理浅析
weixin_44708992的博客
04-06 419
通过保持长连接，直到更新可用，数据可以立即发送到客户端，一旦它在服务器上可用。因此，长时间轮询为消息延迟提供了最佳的情况，并且还消除了空检查，这减少了 XHR 请求的数量和轮询的总体开销。axios 是一个基于 Promise 的 http请求库，可以用在浏览器和 node.js 中，本质上也是对原生XHR的封装，只不过它是Promise 的实现版本，符合最新的ES规则。从服务器检索更新的最简单的策略之一是让客户端进行定期检查：客户端可以以周期性间隔（轮询服务器）启动后台XHR请求，以检查更新。
XMLHttpResquest与fetch请求方式的理解
m0_61464384的博客
04-04 1559
一：迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取完； Iterator遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。 任何数据结构只要部署了Iterator接口，就可以完成遍历操作。 1、通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置。 2、调用next 方法进行向下迭代指向下一个位置，可以将指针指向数据结构的第一个成员。 3、再调用next 方法向下迭代指向下一个位置，可以将指针指向数据结构的下一个成员。 4、不断调用指针对象的 ne
使用XMLHttpRequest与Promise封装axios
weixin_57251940的博客
01-21 523
基于 Promise 和 XHR 封装 Axios 函数
XMLHTTPRequest以及FetchAPI的区别及使用
pengyuandong的博客
08-12 2280
简介：Fetch同XMLHTTPRequest非常类似，都是用来做网络请求。但是同复杂的XMLHTTPRequest API相比，Fetch使用了Promise，这让它使用起来更加简洁，从而避免陷入“回调旋涡” 两者区别： 比如，如果我们想要实现这样一个需求：请求一个URL地址，获取响应数据并将数据转换成JSON格式。使用Fetch和XMLHTTPRequest实现的方式是不同的。 使用XM...
ajax fetch axios
04-27
AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XML（现已更改为JSON）进行异步数据通信的技术，可在不刷新整个页面的情况下部分更新网页内容。然而，AJAX只是用来发送请求和接收响应的技术，需要使用其他技术（如DOM操作）对数据进行解析和呈现。由于其语法相对繁琐且不太便于维护，后续的技术逐渐发展出现。 Fetch是Web API的一部分，用于在浏览器中进行网络请求。Fetch有着更加简洁和直观的语法，支持 Promise，在处理错误、取消请求等方面也有更好的表现。同时，Fetch支持流式处理而无需将响应存储在内存中，可以减少内存占用。 Axios是一个使用Promise基于XMLHttpRequest和fetch进行HTTP请求的JavaScript库。它具有更加直观和简洁的API，对于错误处理、取消请求等方面也有更好的表现。Axios也有一些其他的特性，如请求和响应的拦截器、默认的配置选项、CSRF保护等。由于其语法简单易用，使用较为广泛。 综上所述，Fetch和Axios都比传统的AJAX更加简单直观、易于维护，因此已经成为当今最为流行的前端数据请求解决方案之一。但是，在选择具体的技术时，需要根据具体的项目需求和开发经验来做出决策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值