XHR,ajax,axios,fetch傻傻分不清?
2023-03-15 23:27:49 时间
相关定义:
先从AJAX
入手,下面的定义很重要:
AJAX(Asynchronous JavaScript And XML )是一种使用 XMLHttpRequest 技术构建更复杂,动态的网页的编程实践。 AJAX允许只更新一个 HTML 页面的部分 DOM,而无须重新加载整个页面。AJAX还允许异步工作,这意味着当网页的一部分正试图重新加载时,您的代码可以继续运行。 AJAX正在逐渐被 JavaScript 框架中的函数和官方的
Fetch API
标准取代。
回答 1: AJAX
vs Fetch
AJAX
和 Fetch
都可以访问和操纵 HTTP 管道(发出HTTP请求与接收HTTP响应),是解决动态网页的技术方案。
未来发展方向是Fetch
取代AJAX
回答 2: XHR
vs AJAX
XHR(XMLHttpRequest)对象用于与服务器交互,是AJAX
技术方案的基础,也可以说,使用XHR
对象来发送一个Ajax请求。
看看如何使用 XHR
发送 AJAX
请求。
function sendAjax() {
//构造表单数据
var formData = new FormData();
formData.append('username', 'johndoe');
formData.append('id', 123456);
//创建xhr对象
var xhr = new XMLHttpRequest();
//设置xhr请求的超时时间
xhr.timeout = 3000;
//设置响应返回的数据格式
xhr.responseType = "text";
//创建一个 post 请求,采用异步
xhr.open('POST', '/server', true);
//注册相关事件回调处理函数
xhr.onload = function(e) {
if(this.status == 200||this.status == 304){
alert(this.responseText);
}
};
xhr.ontimeout = function(e) { ... };
xhr.onerror = function(e) { ... };
xhr.upload.onprogress = function(e) { ... };
// 监听xhr状态
xhr.onreadystatechange = function () {
try {
switch(xhr.readyState){
case 1://OPENED
break;
case 2://HEADERS_RECEIVED
break;
case 3://LOADING
break;
case 4://DONE
// 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.
}
break;
}
} catch (e) {
// 通信错误的事件中(例如服务器宕机)
alert('Caught Exception: ' + e.description)
}
//发送数据
xhr.send(formData);
}
回答 3: XHR
vs axios
Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装,只不过是Promise的实现版本,符合最新的ES规范。
有了上面的了解,再回头对比下AJAX
和 Fetch
,Fetch
有什么优缺点呢?
优点
- fetch更加底层,提供的API丰富(
request
和response
) - fetch基于标准promise实现,支持async/await
缺点
- 只有网络错误(如断网)才会调用reject,而对400,500这种错误并不会reject
- 默认不会带cookie,需要添加配置项:
fetch(url,{credentials:‘include’})
- 不支持abort,不支持超时控制或主动取消 (
XHR
支持xhr.ontimeout
超时自动取消,也支持xhr.abort()
主动取消请求) - 无法检测请求的进度(
XHR
可以)
相关文章
- ChatGPT取代搜索引擎?谷歌急了,百度不慌:早已布局
- 达摩院2023十大科技趋势发布
- 阿里成了冤大头??1亿美元收购的开源项目,核心团队出走造竞品,转头又卖了1个亿
- 清华郑纬民院士:AI for Science的出现,让高性能计算与AI的融合成为刚需
- ChatGPT作弊成风引担忧,OpenAI:正在自研审核工具
- 微软又给谷歌「双重暴击」,ChatGPT或将加入Word、PPT和Excel!
- 1.9 亿美元,微软宣布收购DPU初创公司Fungible
- 马云不再是蚂蚁集团实控人、雷军同日卸任两职、乐视回应“四天半工作制”、推特被裁员工仅获1个月工资补偿 | T资讯
- 16位顶尖学者激辩AGI!马库斯、LSTM之父、麦克阿瑟天才奖得主齐聚
- ConvNeXt V2来了,仅用最简单的卷积架构,性能不输Transformer
- 把代码贴进去自动找bug,这个debug神器自动修复仅需几秒,还有GPT-3在线解惑
- AI认定他在千里之外作了案,送进监狱关了7天
- 兄弟,那个帮爷爷卖茶叶的善良女孩,可能是ChatGPT
- 学校封杀,大厂禁用,ChatGPT引发大面积恐慌!
- 第一家濒临倒闭的AI绘画创业公司出现了,创始人:根本赚不到钱
- GitHub被起诉,版权问题再引热议,网友类比谷歌图书:毕竟谷歌没拿用户内容写小说
- AI for Science年度激辩:AlphaFold成功难以复制,数据人才生态建设都是挑战
- 2023 CES:索尼、高通造车热情,欧美出行科技狂欢
- 新年新书单!软件工程师2023年的9本必读书
- 网聊一个月,杀猪盘骗子竟被AI整破防!200万网友大呼震撼