jQuery的ajax是网络请求是常用的方法,方便、简单、成熟等优点使得ajax成为jQuery最重要的一个点。但是在MVVM模式中,大家更倾向于使用更接近es新规则的新的网络请求的插件,jQuery已经逐渐被替代。
1、jQuery的异步请求原理
$.ajax({
type: 'POST',
url: url,
async:false,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
ajax的请求是基于基础的网络请求XMLHttpRequest,大致可以分为五步:
1.设置请求参数
2.设置回调函数
3.回去readyState对象
4.判断报文状态:state返回码
5.读取数据
其实这五步是XMLHttpRequest的请求原理,和jQuery并没有什么关系。jQuery就是利用了第三步,onreadystatechange来监听state的变化,通过状态state的不同标志来实现异步。
state状态码:
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)
当状态码是4的时候,表示请求已经完成,然后根据status的状态码来判定是否成功。但是在使用jQuery的时候,有个async可以设置请求的异步和同步,当设置同步的时候,你会发现页面在请求发起之后,不会执行后面的代码,导致js进入一种假死的状态,当设置为异步时,请求过后,js会继续执行代码,并不会等结果返回才开始执行。
这就是jQuery的请求原理。
2、axios的请求原理
在vue中,官方推荐使用axios来实现网络请求,那么axios的请求原理又是什么呢?我们通过查看axios的源码可以看到
我们看到axios的请求是使用Promise来实现XMLHttpRequset的。实现的原理和上面jQuery一样,毕竟都是底层js的原生请求,但是使用Promise来封装有什么好处呢?很明显,promise本身就是一个异步的处理的方案,比传动的异步处理更强大也更合理。
axios({
method: 'post',
url: '/url',
data: {
data1: 'data1',
data2: 'data2'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
很明显,axios是使用异步处理的,但是如果我们在一定场景下需要同步请求,这时候我们需要借助async和
await
也就是说我们需要单独对axios进行封装同步和异步,当然 不封装直接用也可以,但是出于程序的健壮性来考虑还是建议自己项目中封装一下。
每日一积累!