vue的axios的实现

axios和ajax的区别

axios就是ajax，但是ajax不等于axios，axios只是通过promise实现对ajax的封装，就像jQuery对ajax的封装一样

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

原生ajax请求数据

var xhr =new XMLHttpRequest()
xhr.open("get",url,true);
xhr.send();
xhr.onreadysattechange = () =>{
 if(xhr.readystate == 4 && xhr.status == 200){
     console.log(xhr.responseTEXT)
 }
}    

原生ajax的缺点

• back和History,对浏览器机制的破坏。
• 安全问题。易受到黑客攻击。
• 对搜索引擎支持较弱。
• 不能很好支持移动设备。
• 违背URL和资源定位的初衷

jQuery的ajax请求数据

$.ajax({
  url: '/getUsers',
  type: 'get',
  dataType: 'json',
  data: {
  },
  success: function (response) {
      console.log(response)；
  }
})

query的ajax的缺点

• jQuery的ajax本身是针对MVC的编程,不符合现在前端MVVM
• jquery文件过大，我们本身只需要ajax的话，引入jquery文件很不合理

vue的axios请求数据

axios.get(url).then(res=> {
       // 处理请求成功之后的响应体
       console.log(res);
   }).catch(function (error) {
       console.log(error);
   })

axios的优点

• 在浏览器中创建 XMLHttpRequests
• 在node.js则创建http请求
• 支持Promise API
• 支持拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换成JSON数据格式
• 客户端支持防御XSRF

axios的实现原理

const Axios = {
    get: function(url) {
        return new Promise((resolve, reject) => {
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 配置请求信息  open()
            // 请求方式  请求路径  是否异步
            xhr.open('GET', url, true);
            // 注册回调函数
            xhr.onreadystatechange = function() {
                // readyState == 4说明请求已完成
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 从服务器获得数据
                    resolve(xhr.responseText)
                }
            };
            // 发送请求
            xhr.send();
        })
    },
}