axios简单介绍

axios的配置，get,post,axiso的同步问题解决

一.缘由

　　vue-resoure不更新维护，vue团队建议使用axios。

二.axios安装

　　1、利用npm安装npm install axios --save-dev

　　2、利用cnpm安装npm install axios --save  //taobao源
　　3、利用bower安装bower install axios --save
　　4、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三.示例

　　1、 发送一个GET请求

　　

//将请求参数挂载到请求的url中的形式
axios.get('/user?id=123&page=1').then(function(response){
    console.log(response);//请求正确时执行的代码
}).catch(function (response){
    console.log(response);//发生错误时执行的代码
});

//将请求参数单独的params属性传入的形式
axios.get('/user', {
    params : { //请求参数
        id : 123,
       page:1
    }
}).then(function(response){
    console.log(response);//请求正确时执行的代码
}).catch(function(response){
    console.log(response);//发生错误时执行的代码
});        

　　　2.发送一个post请求

　　

axios({
          method: "post",
          url: "/api/history/query",
          headers: {
            "Content-Type": "application/json"  //限制传输数据类型
          },
          data: {
             "firstName": "Fred",
             "lastName": "Flintstone"
          } //传输的json数据
}).then(function(response){
   console.log(response);    //发生成功时执行的代码
}).catch(function(response){
    console.log(response);    //发生错误时执行的代码
})        

        3.一次并发多个请求

　　

function getUserAccount(){
   return axios.get('/user/12345');
}
function getUserPermissions(){
   return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(getUserAccount,getUserPermissions){
    console.log(getUserAccount)　
    console.log(getUserPermissions)　　
    //getUserAccount是getUserAccount()成功后函数返回的值 
    //getUserPermissions是getUserPermissions()成功后函数返回的值
})); 

四.axios的API

(1)axios可以通过配置（config）来发送请求

//发送一个"POST"请求
axios({
    method:"POST",
    url:"/user/123",
    data:{
        "first":"hello",
        "last":"world"
    }
})