Vue——axios实例以及与ajax对比

复盘项目时，注意到dell老师使用的是axios实例，封装简单可用的get方法，并没有直接使用axios.get。

axios实例

*为什么要创建axios实例，与直接的axios.get有什么区别呢？

因为在实际工作中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。
而且这样写代码又精简了啊喂（>○<）

另外搜索中又发现了ajax axios的对比，再学习一哈ajax：

ajax

Query ajax 是对原生XHR的封装。重点就是首先实例一个XMLHttpRequest对象，用其中的open方法建立连接；send方法传输数据（前端传到后台）；然后再利用onreadystatechange 监听readyState的变化，当其为4时，代表请求完成

简单的代码实现ajax

遇到的面试题也有手写ajax(๑°ㅁ°๑)ᵎᵎᵎ：

funcion ajax(url,fn){
     // 刚好插一个手写XHR
     // XMLHttpRequest对象用于在后台与服务器交换数据  
     const xhr = new XMLHttpRequest()
     //get请求url,true代表异步
     xhr.open("GET","/api",true)
     xhr.onreadystatechange = function(){
     if(xhr.readyState === 4 && xhr.status === 200){
             //responseText存放响应的文本
             fn(xhr.responseText)
    }
   }
   xhr.send() //发送请求
}

关于状态码

（不会的东西真是层层递进〒▽〒

xhr.readyState:
0 未初始化，还没有调用send()方法；
1 载入，已经调用send()正在发送请求；
2 载入完成， send()方法执行完成，已接收到全部响应内容；
3 交互， 正在解析响应内容
4 完成，响应内容解析完成，可在客户端调用

xhr.status :
2xx 表示成功处理请求，如200
3xx 需重定向，浏览器直接跳转，如301 302 304

重定向

4xx 客户端请求错误 如404 403

5xx 服务端错误

ajax与MVC

ajax是针对MVC，axios针对MVVM ：

另一篇博客：MVVM MVC MVP

···············································································
axios其实就是在ajax的基础上加了promise

const myAxios = {
        get: function(url) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        resolve(xhr.responseText)
                    }
           };
              xhr.send();
         })
  }

二者优缺点

ajax缺点:

• 基于原生的XHR开发，XHR本身的架构不清晰
• JQuery整个项目太大，单纯使用ajax却要引入整个Juery非常的不合理
• 配置和调用方式非常混乱，而且基于事件的异步模型不友好

axios优点：

• 从浏览器中创建 XMLHttpRequest
• 支持 Promise API
• 从 node.js 创建 http 请求
• 转换请求和响应数据
• 自动转换JSON数据