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"
     }
 })