vue之axios XMLHTTPRequest原理

image.png

首先我们了解下ajax的原理
现有的ajax库都是对XMLHTTPRequest对象的一种封装（其可能不支持同步请求的方式）
现代的主流浏览器 都支持原生XMLHTTPRequest对象的方法
下面我们看下如何用XMLHTTPRequest实现同步请求
所谓的同步请求 也就是指上面的代码执行完才能执行到下面的
例如下面

image.png

我们在页面里面创建了一个XMLHTTPRequest请求 并且将ajax请求的结果放入了textarea中 最后在控制台中输出了完成两个字
其中请求地址是我在本地做的一个php页面 输出一段内容
里面代码如下

image.png
其中我在代码里面写入了sleep(3) 表示过了3秒输出这段json内容
我们在前台运页面看下结果
image.png
可以发现我们的页面卡顿了3秒 之后页面出现了
image.png
最后在控制台中输出了完成两个字
可以看见确实是按照我们的设想同步的执行了
那下面看下异步请求如何写呢？

我们把xml.open的第三个参数改成true看下运行效果

image.png
可以发现页面并没有发生卡顿 而且控制台里面直接输出了完成两个字 而页面上却没有内容
那么怎么确定我们异步请求是否完成呢（需要使用监听函数onreadystatechange）
我们用xml请求的时候 它的状态会从0-4发生变化 只有当readyState的值为4的时候表示请求完成
代码如下
image.png
运行结果
image.png
先是控制台中出现了完成两个字 而且网页没有卡顿3秒
然后过了3s后 textarea中出现如下
image.png
以上就是XMLHTTPRequest异步请求简单过程
我们知道 现在异步请求都是基于promise形式进行请求的
下面我们封装下上面的代码 使其看起来有逼格一些
image.png
运行结果
image.png
与上面是一模一样的
我们还可以写成es2015对象解构的方式
image.png
我们还可以和axios一样 返回的是一个自定义的data属性（模拟axios）
image.png

运行效果还是一样的
最后我们看下axios是如何使用get方式发送请求的
其实和上面的很类似

image.png
其中ret.data里面的data就是axios封装的自定义数据结构 里面有个属性叫data
运行结果
image.png
是因为axios内部把我们的json内容转化为对象了
这里为了演示效果 我把它转为json字符串
修改如下
image.png
把对象转换为json字符串
运行效果
image.png
最后axios这里也可以是对象解构方式写
image.png
运行效果
image.png
以上就是axios和XMLHTTPRequest请求的简单原理