【vue学习】axios

Ajax、fetch、axios的区别与优缺点

axios的github地址

原生ajax

//建立异步对象 
    var xhr = new XMLHttpRequest();
    //设置请求基本信息，并加上请求头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post', 'test.php' );
    //发送请求
    xhr.send('name=Lan&age=18');
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };
复制代码

jqueryAjax

var loginBtn =  document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=lan&pwd=123456",
        success:function(data){
           console.log(data);
        }
    });
}
复制代码

fetch

fetch('http://www.mozotech.cn/bangbang/index/user/login', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.text();
})
.then(data => {
    console.log(data);
})
复制代码

axios

axios({
    method: 'post',
    url: '/abc/login',
    data: {
        userName: 'Lan',
        password: '123'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
复制代码

同时发起多个请求：

对比

1. 几种方式的对比

方式	优缺点
ajax	【优势：局部更新；原生支持】【缺点：可能破坏浏览器后退功能；嵌套回调】
jqueryAjax	【在原生的ajax的基础上进行了封装；支持jsonp】
fetch	【优势：解决回调地狱】【缺点：API 偏底层，须要封装;默认不带Cookie，须要手动添加; 浏览器支持状况不是很友好，须要第三方的ployfill】
axios	【几乎完美】

2. axios的特色

axios特色
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

axios提问

1. 如何将axios异步请求同步化处理？

//使用 asyns/await 
async getHistoryData (data) {
 try {
   let res = await axios.get('/api/survey/list/', {
     params: data
   })
   this.tableData = res.data.result
   this.totalData = res.data.count
 } catch (err) {
   console.log(err)
   alert('请求出错！')
 }
}
复制代码

2. 为什么官方推荐使用axios而不用vue-resource？

   在Vue1.x中，官方推荐使用的ajax库是vue-resource。到了Vue2.x，官方（尤大）推荐的ajax库改成了Axios，按照说法是由于已有一个更完备的轮子，就不须要造一个新的。

3. 你了解axios的原理吗？有看过它的源码吗？

   Axios源码深度剖析

4. 你有封装过axios吗？主要是封装哪方面的？

   具体config配置参考

   

   到具体页面中的应用：

   

5. 如何中断（取消）axios的请求？

   

6. axios怎么解决跨域的问题？

   

   • 若是 server 端是本身开发的，那么修改相关代码支持跨域便可。若是不是本身开发的，那么能够本身写个后端转发该请求，用代理的方式实现。

   • 跨域这个行为是浏览器禁止（浏览器不容许当前页面的所在的源去请求另外一个源的数据）的，可是服务端并不由止

   • 源指协议、端口、域名。只要这个3个中有一个不一样就是跨域。 这里列举一个经典的列子：

     协议跨域：
     http://a.baidu.com访问https://a.baidu.com；
     端口跨域：
     http://a.baidu.com:8080访问http://a.baidu.com:80；
     域名跨域：
     http://a.baidu.com访问http://b.baidu.com；
     复制代码

   • 关键字:Access-control-Allow-origin、跨域

   • 几种解决跨域的方法

   • A） 开发模式下，能够在config中配置proxyTable便可

     

   • B） 服务端基于spring实现

     

   • C） CORS：①即跨源资源共享，它定义了一种浏览器和服务器交互的方式来肯定是否容许跨域请求。 ②它是一个妥协，有更大的灵活性，但比起简单地容许全部这些的要求来讲更加安全。③可是CORS也具备必定的风险性，好比请求中只能说明来自于一个特定的域但不能验证是否可信，并且也容易被第三方入侵。 ④这里通常须要后端配合,开启cors。通常各类语言都有相似的包。好比NodeJS的koa2-cors

     

   • D） Nginx代理proxy

     

   • E） express代理

     

   • 请求头自动携带cookie时:config中配置withCredentials:true，不然为false【看到有人说：withCredentials为true的状况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，并且还要设置header('Access-Control-Allow-Credentials: true')】

   • config中配置qs：避开ajax信使请求，并兼容Android？

   import Qs from 'qs'
   复制代码