axios的简单介绍

一、几种异步请求方式以及其对比情况

原生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);
});

axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。注意：该方法是axios的静态方法，不是axios实例的方法

main.js
 
//引入axios模块(先下载`axios`--)
import axios from 'axios'
//将axios挂载在vue原型链上
Vue.prototype.$axios = axios;

Home.vue
 
//在methods中定义请求方法，并return出去，不要写请求回调then()
methods:{
    getAllTask:function(){
     console.log('调用第一个接口')
     return this.$axios({
              url:'http://192.168.*.**:***/api/getTask/getAllData',
              method:'GET',
              params:{
                offset:1,
                pageSize:10
              }
            })
    },
    getAllCity:function(){
     console.log('调用第二个接口')
     return this.$axios({
                url:'http://192.168.*.**:***/city/getCities',
                method:'GET',
              })
    }
  },
//在mounted周期同时发送两个请求，并在请求都结束后，输出结果
 mounted:function(){
    var me = this; 
    this.$axios.all([me.getAllTask(),me.getAllCity()])
    .then(me.$axios.spread(function(allTask, allCity){
        console.log('所有请求完成')
        console.log('请求1结果',allTask)
        console.log('请求2结果',allCity)
 
    }))
   
  }

对比

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

2. 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个中有一个不同就是跨域。 这里列举一个经典的列子：

几种跨域方案

文章来源：https://www.jianshu.com/p/d771bbc61dab