目录：

  • 简介
  •  用axios发送AJAX请求：axios([options])，axios.get(url[,options])，axios.post(url,data,[options])
  • axios不支持跨域

一、简介

Vue本身不只是ajax请求，需要使用vue-resource(1.0已经停止维护)、axios(2.0官方推荐)等插件实现。

axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是Vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。

我们查看一下 axios的github的官方地址：axios的Github地址(这个里面有很详细的axios的使用方法)，也可以在  百度文本框: GitHub axios。

如图：

axios发送form请求 使用axios发送ajax请求_json

 

二、用axios发送AJAX请求

2.1、安装axios并引入

npm install axios -S

也可以直接下载axios.min.js文件

2.2、基本用法

axios([options])
axios.get(url[,options])
axios.post(url,data,[options])

2.3、axios([options])用法

语法：

//1、get的请求方法
axios({
    method: "get",
    url: "user.json"，
    params: {    //get方法带参数,是放在请求头中的
    ID: 12345
    },
}).then(resp => {   //resp => {} 相当于 function(resp){}
    console.log(resp); //请求成功
}).catch(error => {
    console.log(error);  //请求失败
}).then(function(){
    console.log("不管怎么样都要执行");  //必须执行的代码，相当于finnally
});

//2、post的请求方法
axios({
    method: "get",
    url: "user.json"
    data：{      //post方法带的参数，是放在body中的
       firstName: 'Fred'，
       lastName: 'Flintstone'
    }
}).then(resp => {     //请求成功
    console.log(resp);
}).catch(error => {    //请求失败
    console.log(error);
}).then(() => {   //() => {} 相当于 function(){}
    console.log("不管怎么样都要执行");   //必须执行的代码，相当于finnally
})

练习实例如下：

<body>
    <div id="box">
        <!--绑定send方法-->
        <button @click="send">发送ajax请求</button>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            methods:{
                send(){
                    axios({
                        method: "get",  //请求方法get
                        url: "user.json"  //在同等目录下创建一个user.json => {"name":"帅高高","age":23}
                    }).then(resp => {    //请求成功后返回
                        console.log(resp);
                    }).catch(error => {   //请求失败后的返回
                        console.log(error);
                    }).then(function(){    //相当于finally，一定执行
                        console.log("不管怎么样都要执行");
                    });
                }
            }
        })
    </script>
</body>

执行结果如下：

axios发送form请求 使用axios发送ajax请求_json_02

2.4、axios.get(url[,options])

传参方式：1、通过url传参     2、通过params选项传参

//1、通过url传参
axios.get('/user?name=shuaigaogao&age=23').then(response => {
    //请求成功
    console.log(response);
  }).catch(error => {
    // 请求议程
    console.log(error);
  }).then(function () {
    //一定执行的程序，相当于 finnally
  });

//2、通过params选项传参
axios.get('/user', {
    params: {
      name: shuaigaogao
      age: 23
    }
  }).then(response => {
    //请求成功
    console.log(response);
  }).catch(error => {
    //请求异常
    console.log(error);
  }).then(function () {
    // 一定执行的程序
  });

练习实例如下： 

<body>
    <div id="box">
        <!--以get方式发送ajax请求-->
        <button @click="sendGet">GET方式发送ajax请求</button>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            methods:{
                sendGet(){ //调用axios.get方式
                    axios.get("user.json").then(resp => { //请求成功   resp => {} 相当于 function(resp){}
                        console.log(resp.data);
                    }).catch(err => { //请求异常
                        console.log(err); 
                    });
                }
            }
        })
    </script>
</body>

结果如下：

>{name: "帅高高", age: 23}
    name: "帅高高"
    age: 23
    >__proto__: Object

2.5、axios.post(url,data,[options])

axios默认发送数据时，数据格式是Request Payload,并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json格式传参。

axios.post("url",{
    username: 'shuaigaogao',  //官方推荐的传参方式
    age: 23
    }
).then(resp => {
    console.log(resp.data);
}).catch(err => {
    console.log(err);
}).then(function(){
    //一定执行
});

如图：数据格式是Request Payload

axios发送form请求 使用axios发送ajax请求_json_03

正确的传参方式：

  •  自己拼接为键值对
  • 使用transformRequest，在请求发送前将请求数据进行转换
  • 如果使用模块化开发，可以使用qs模块进行转化
//自己拼接键值对方式
axios.post("url","username=shuaigaogao&age=23" //这个这种方式是放在body中的
).then(resp => {
    console.log(resp.data);
}).catch(err => {
    console.log(err);
}).then(function(){
    //一定执行
});

//使用tansformRequest，在请求发送前请求数据进行转换
axios.post("url",this.data,{
    transformRequest:{
        function(data){
            let params = '';
            for(let index in data){
                params = index+'='+data[index]+'&';
            }
            return params;
        }
    }
    }
).then(resp => {
    console.log(resp.data);
}).catch(err => {
    console.log(err);
}).then(function(){
    //一定执行
});

我们就拿 tansformRequest，在请求发送前请求数据进行转换做实例：

<body>
    <div id="box">
        <button @click="sendGet">POST方式发送ajax请求</button>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                user:{  //定义操作的数据
                    name:"shuaigaogao",
                    age:23
                }
            },
            methods:{
                sendGet(){
                    axios.post("url",this.user, //this.user就是上面data中的数据
                    {transformRequest:{
                            function(data){   //data就是 this.user传进来的参数
                                let params = '';
                                for(let index in data){
                                    params = index+'='+data[index]+'&';
                                }
                                return params;  //返回处理好的参数
                            }
                        }
                        }
                    ).then(resp => {
                        console.log(resp.data);
                    }).catch(err => {
                        console.log(err);
                    }).then(function(){
                        //一定执行
                    });
                }
            }
        })
    </script>
</body>

三 、axios不支持跨域操作

axios本身并不支持发送跨域的请求，没有提供相应的API，作者赞没有计划在axios添加支持发送跨域请求没所以只能使用第三方库。

除非你请求的网站，它本身就支持跨域，比如，github网站，它本身就支持跨域，所以请求它是没有问题的。

<body>
    <div id="box">
        <!--传入uid的参数已经绑定到data中的uid中-->
        <button @click="GetUserById(uid)">获取指定github账户信息并显示</button>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                uid:''  //上面绑定GetUserById函数传入参数uid，已经绑定到data中了
            },
            methods:{
                GetUserById(uid){
                    //在url中调用uid 则用$(uid)
                    axios.get("http://api.github.com/users/$(uid)").then(resp => {
                        console.log(resp.data);
                    })
                }
            }
        })
    </script>
</body>