addeventlistener不支持ajax_十万个Web前端面试题之AJAX、axios、fetch的区别

2024-04-12 00:12:51

来自灵魂的拷问

你知道AJAX、axios、fetch的区别吗？

小白回答

AJAX用来请求数据的吧，另外axios和fetch是啥？

老鸟回答

AJAX

Gmail开发人员发现IE里面有个XMLHTTPRequest对象来请求数据时，可以实现无刷新数据请求，所以使用这个特性，进行网络数据请求，这就是AJAX的由来。

AJAX不是一个单词，他的全称是Asynchronous JavaScript and XML，就是异步的JavaScript和XML，它是一套用于创建快速动态网页的技术标准，使用步骤如下：

创建异步XMLHttpRequest对象
设置请求参数，包括请求的方法和URL等
发送请求
注册事件，事件状态变更会及时响应监听
在监听里面获取并处理返回数据

所以AJAX的核心就是XMLHttpRequest对象，这是一个非常早的实现方法，也是兼容性最好的，已经成为了浏览器标准，虽然我们现在都使用其它的API规范，但对象名字暂时还是用XML命名

axios

axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中，它底层还是基于XMLHttpRequest对象的，你可以认为它是一个方便的封装库，除了基础请求数据，它还增加了如下功能：

对PromiseAPI的支持
支持请求拦截和响应、转换请求数据和响应数据、取消请求
可以自动转换JSON数据
支持防御XSRF

fetch

fetch就不是XMLHttpRequest对象了，fetch是原生的js对象，也就是说，它不依赖浏览器，fetch提供了一个理解的请求替换方案，可以提供给其它技术使用。我们主要需要了解下fetch和ajax的本质区别：

fetch返回的是Promise，所以如果HTTP状态码是404之类的，fetch也是成功返回的，只有在网络连接错误的情况下，才会reject
fetch不发送cookies

fetch的请求写法会比AJAX简单许多，但我想，最主要的问题是，无法区分HTTP状态码了，这个在编程时还是比较常用的，所以我们目前还是使用axios比较多，而很少使用fetch

addeventlistener不支持ajax_十万个Web前端面试题之AJAX、axios、fetch的区别相关推荐

web前端面试题(附答案)
web前端面试题 1.src和href的区别 ? href: Hypertext Reference的缩写,超文本引用,多数用于a link 标签看下图加载他们的时候不会停止对当前页面的加载浏 ...
Web前端面试题集锦
Web前端面试题集锦前端开发面试知识点大纲: 注意转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
web前端面试题-css方面
web前端面试题-css 1. display: none; 与 visibility: hidden; 的区别 2 link 与 @import 的区别 3 display,float,positi ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）
Web前端面试题 Web前端面试题:说说你对webpack的看法解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
javascript array添加图片_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
WEB前端面试题整理
WEB前端面试题文章目录 WEB前端面试题一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...
吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！
吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...

最新文章

热门文章