昨天被头条的面试官面完之后虐了一地,倒是不难,问一堆这个和那个有啥不同,我心里想着难道有可比性么,这种问题怎么感觉就像有时候问你人都有什么人?有啥不同一样。。。只能吐槽但是也无能为力,就怪自己学艺不精吧。
当时可能是面试官太帅了,所以太紧张了,我竟然脑子里面想不起来原生是怎么写的了,直接说把原生的忘了,xmlhttpRequest在我的脑海里竟然一点映象也没了,面之前还手写的代码。。。
请求接口除了原生ajax,$.ajax,fetch,axios,vue框架的话自己也封装了一个vuereaouce方法。先看看这几个请求接口的写法:
原生的请求方法:
var xhr = new xmlHttpRequest();
var httprequest
xhr.onreadystatechange = function(){
if(httpRequest.readyState === XMLHttpRequest.DONE){
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
httpRequest.open('GET',url);
//发送请求
httpRequest.send();
}
原生的ajax请求经历了这四部:
1.创建一个xmlhttpRequest请求
2.指定响应函数
3.发送请求
基于原生的ajax,大神们进行封装净化到了jquery的$.ajax,$.ajax如果用到现在的mvvm框架里面就有点不搭了,显得项目有点大占内存,配置和调用不友好
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
自从2016年开始流行es6之后,fetxh和axios开始盛行了
axios:
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
Ajax:
ajax,最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
Jquery Ajax:
是jQuery框架中的发送后端请求技术,由于jQuery是基于原始的基础上做的封装,所以,jquery Ajax自然也是对原始ajax的封装
Fetch:
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。
axios:
axios不是原生JS的,需要进行安装,它不但可以在客户端使用,而且可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。