jQuery和axios的异步请求原理

       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进行封装同步和异步，当然 不封装直接用也可以，但是出于程序的健壮性来考虑还是建议自己项目中封装一下。

  每日一积累！