异步请求xhr、ajax、axios与fetch的区别比较
why: 为什么会出现不同的方法呢?
what: 这些都是异步请求数据的方法。在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
how:他们都有各自的特点。
1. XMLHttpRequest对象
现代浏览器,最开始与服务器交换数据,都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。
它给我们带来了很多好处。
- 不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求/接收数据
- 在后台向服务器发送数据。
但是,它也有一些缺点:
- 使用起来也比较繁琐,需要设置很多值。
- 早期的IE浏览器有自己的实现,这样需要写兼容代码。
if (window.XMLHttpRequest) { // model browser
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
try {
// TODO 处理响应
if (xhr.readyState === XMLHttpRequest.DONE) {
// XMLHttpRequest.DONE 对应值是 4
// Everything is good, the response was received.
if (xhr.status === 200) {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may hava a 404 (Not Found)
// or 500 (Internal Server Error) response code.
}
} else {
// Not ready yet
}
} catch (e) {
// 通信错误的事件中(例如服务器宕机)
alert('Caught Exception: ' + e.description)
}
}
2. jQuery ajax
为了更快捷的操作DOM,并且规避一些浏览器兼容问题,产生了jQuery
。它里面的AJAX
请求也兼容了各浏览器,可以有简单易用的方法$.get
,$.post
。简单点说,就是对XMLHttpRequest
对象的封装。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})
优点:
- 对原生
XHR
的封装,做了兼容处理,简化了使用。 - 增加了对
JSONP
的支持,可以简单处理部分跨域。
缺点:
- 如果有多个请求,并且有依赖关系的话,容易形成回调地狱。
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
- ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。
3. axios
Axios
是一个基于promise
的HTTP
库,可以用在浏览器和 node.js
中。它本质也是对原生XMLHttpRequest
的封装,只不过它是Promise的实现版本,符合最新的ES规范。
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'liu',
lastName: 'weiqin'
}
})
.then(res => console.log(res))
.catch(err => console.log(err))
Vue2.0之后,尤雨溪大大推荐大家使用axios
来请求数据。
优点:
- 从浏览器中创建
XMLHttpRequests
- 从
node.js
创建http
请求 - 支持
Promise
API - 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON
数据 - 客户端支持防御
XSRF
缺点:
- 只持现代代浏览器.
4. fetch
Fetch API
提供了一个 JavaScript
接口,用于访问和操作HTTP
管道的部分,例如请求和响应。它还提供了一个全局fetch()
方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
fetch
是低层次的API,代替XHR
,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如Service Workers
。但是想要很好的使用fetch
,需要做一些封装处理。
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
优势:跨域的处理
在配置中,添加mode: 'no-cors'
就可以跨域了
fetch('/users.json', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function() { /* handle response */ });
fetch
目前遇到的问题:
fetch
只对网络请求报错,对400
,500
都当做成功的请求,需要封装去处理fetch
默认不会带cookie
,需要添加配置项。fetch
不支持abort
,不支持超时控制,使用setTimeout
及Promise.reject
的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。fetch
没有办法原生监测请求的进度,而XHR
可以。
请注意,
fetch
规范与jQuery.ajax()
主要有两种方式的不同,牢记:-. 当接收到一个代表错误的
HTTP 状态码
时,从fetch()
返回的Promise
不会被标记为 reject, 即使该 HTTP 响应的状态码是404
或500
。相反,它会将Promise 状态
标记为resolve
(但是会将resolve
的返回值的ok
属性设置为false
),仅当网络故障时或请求被阻止时,才会标记为reject
。-. 默认情况下,
fetch
不会从服务端发送或接收任何 cookies, 如果站点依赖于用户session
,则会导致未经认证的请求(要发送cookies
,必须设置credentials
选项)。
参考
异步请求xhr、ajax、axios与fetch的区别比较的更多相关文章
- 第三篇,ajax 和 axios、fetch的区别
1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...
- 异步请求之ajax
一.初识ajax 1.下载引入jQuery <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"& ...
- 异步请求(ajax,http) 之 逐渐完善的大全
异步请求在我们的开发之中是经常需要学习和理解的内容,我们将会在这一篇文章中依据不同的语言和环境内容进行归类讲解. JS: ajax是我们最为常用的页面异步请求,在只需要修改部分页面内容而不需要更换全部 ...
- ajax和axios、fetch的区别
参考文章: https://www.jianshu.com/p/8bc48f8fde75 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题. fetch是用来取代传统的 ...
- 网页的异步请求(Ajax)
JS原生Ajax操作(XMLHttpRequest) GET请求 var xmld=new XMLHttpRequest(); xmld.open("GET","wan. ...
- jquery的几种异步请求,ajax
http://blog.csdn.net/a5489888/article/details/8523316
- vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...
- Ajax异步请求-简单模版
<script type="text/javascript"> window.onload = function () { document.getElementByI ...
- 异步请求Ajax(取得json数据)
异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...
随机推荐
- SQL SERVER 之快照复制,事务复制,合并复制
一.环境要求及说明 1.快照复制和事务复制是单向的(2005及以后的版本中加入了订阅端可更新的事务复制). 2.合并复制是双向的. 3.快照复制对表结构没有要求. 4.事务复制要求表有主键. 5.合并 ...
- 数据库读写分离Master-Slave
数据库读写分离Master-Slave 一个平台或系统随着时间的推移和用户量的增多,数据库操作往往会变慢,这时我们需要一些有效的优化手段来提高数据库的执行速度:如SQL优化.表结构优化.索引优化.引擎 ...
- Mysql常用的查询语句,记录一下,好东西大家共享
一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...
- 跟着大彬读源码 - Redis 1 - 启动服务,程序都干了什么?
一直很羡慕那些能读 Redis 源码的童鞋,也一直想自己解读一遍,但迫于 C 大魔王的压力,解读日期遥遥无期. 相信很多小伙伴应该也都对或曾对源码感兴趣,但一来觉得自己不会 C 语言,二来也不知从何入 ...
- MagicBook屏幕频闪解决方案(Windows、MacOS)
对于已经看到这篇文章的小伙伴们,就不解释何为PWM调光频闪了. MagicBook笔记本性价比高,但屏幕素质确实很一般,我们人眼看不出来的频闪,实际对眼睛损害很大,如图(需要设置快门参数,如1/400 ...
- Codeforces 755E:PolandBall and White-Red graph(构造+思维)
http://codeforces.com/contest/755/problem/E 题意:给出n个点和一个距离d,让你在这个n个点的图里面构造一个子图,使得这个子图的直径和补图的直径的较小值为d, ...
- [常用命令]OSX命令
在mac os下,如何通过命令行来下载网络文件?如果你没有安装或wget命令,那么可以使用curl工具来达到我们的目的. curl命令参数: curl ‘url地址’ curl [选项] ‘url地址 ...
- 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
- HiLoGenerator生成id
using System.Linq; namespace Product.Host { public class HiLoGenerator { ; ; ; private object Sequen ...
- 哈夫曼编码与解码的C++实现:建立哈夫曼树、进行哈夫曼编码与解码
最近完成了数据结构课程设计,被分到的题目是<哈夫曼编码和解码>,现在在这篇博文里分享一下自己的成果. 我在设计时,在网上参考了很多老师和前辈的算法和代码,向他们表示感谢!他们的成果给了我很 ...