XMLHttpRequest的简单数据请求

你可在设计到AJAX和axios的原理的问答用到这段简单的代码，因为他们底层都是封装的XMLHttpRequest

const xhr = new XMLHttpRequest()
xhr.open('GET','https://baidu.com')
xhr.setRequestHeader('Content-type','application/json')
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            let res = xhr.responseText
            console.log(res)
        }
    }
}

axios相对于ajax和fetch有什么优点

1. 可扩展性
2. 请求拦截器和响应拦截器
3. 对于Async和await的语法糖支持很好
4. 对于NodeJs和Window环境都兼容，因为底层其实用到了一些适配器模式，因为wiindow环境的axios底层封装的更多时XMLhttprequest，但是nodejs环境用http对象更多（为什么nodejs环境用http或者https更多，主要还是因为nodejs环境的网络处理对象要求更高，除了网络请求还有i/o进程等等），然后axios是对两个对象都进行了api的统一，底层会判断所在的环境是否有window对象。

底层的处理流程

1. 构造Axios实例对象，该axios实例对象是该项目此次的运行创建的axios，能够继承真实axios类的属性，然后axios实际上是一个Promise对象
2. 响应拦截器和请求拦截器底层使用的是装饰器模式，也就是可以在该实例的响应拦截器和请求拦截器重写相关的代码，但是不影响实际Axios的代码
3. 对于axios其实有一种defaultConfig/VueConfig，他会将两个Config进行合并，然后如果两个Config都有配置，就优先VueConfig，对于这些header、method等等都会有一个默认的配置
4. 然后Axios的执行顺序是一个数组，类似于中间件的一个逻辑，它会将请求拦截器配置的一些函数unshift进执行数组的头部，然后中间是请求，最后请求接收到回复，响应拦截器会push到数组的尾部，形成一个洋葱模型的执行顺序，然后promise会链式一步步走下去，然后如果出现错误会有一些内部的trycatch或者catch等方式捕获
5. 实际的请求是封装了XMLHttpRequest，然后axios的话细节上对一些option方法进行了一些重写，然后挂载到原本的Axios类的prototype上，于是实例就可以使用重写后的方法，这种在Vue2对于数组的一些响应式数据的pushpop等方法时，也有用到。