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请求

　　

1 //将请求参数挂载到请求的url中的形式 2 axios.get('/user?id=123&page=1').then(function(response){ 3     console.log(response);//请求正确时执行的代码 4 }).catch(function (response){ 5     console.log(response);//发生错误时执行的代码 6 }); 7  8 //将请求参数单独的params属性传入的形式 9 axios.get('/user', {10     params : { //请求参数11         id : 123,12        page:113     }14 }).then(function(response){15     console.log(response);//请求正确时执行的代码16 }).catch(function(response){17     console.log(response);//发生错误时执行的代码18 });

　　　2.发送一个post请求

　　

1 axios({ 2           method: "post", 3           url: "/api/history/query", 4           headers: { 5             "Content-Type": "application/json"  //限制传输数据类型 6           }, 7           data: { 8              "firstName": "Fred", 9              "lastName": "Flintstone"10           } //传输的json数据11 }).then(function(response){12    console.log(response);    //发生成功时执行的代码13 }).catch(function(response){14     console.log(response);    //发生错误时执行的代码15 })

        3.一次并发多个请求

　　

1 function getUserAccount(){ 2    return axios.get('/user/12345'); 3 } 4 function getUserPermissions(){ 5    return axios.get('/user/12345/permissions'); 6 } 7 axios.all([getUserAccount(),getUserPermissions()]) 8 .then(axios.spread(function(getUserAccount,getUserPermissions){ 9     console.log(getUserAccount)　10     console.log(getUserPermissions)　　11     //getUserAccount是getUserAccount()成功后函数返回的值 12     //getUserPermissions是getUserPermissions()成功后函数返回的值13 }));

 

四.axios的API

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

1 //发送一个"POST"请求2 axios({3     method:"POST",4     url:"/user/123",5     data:{6         "first":"hello",7         "last":"world"8     }9 })