Vue的Ajax(vue-resource/axios)

一简介

1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现

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

3、参考：GitHub上搜索axios，查看API文档

二使用vue-resource发送AJAX请求

1、安装vue-resource并引入

yarn add vue-resource

npm install --save vue-resource

在main.js中引入

import VueResource from 'vue-resource';

Vue.use(VueResource);

2、发送get请求：

 this.$http.get('http://api.fat.tianlu56.com.cn/order/orderIn/list',{

                    pageSize:'',

                    pageNo:'',

                    token:'token-5A973431EEC947459D7A0F56A31A2550'

                }).then(function (data) {

                    console.log(data);//成功

                },function (res) {

                    console.log(res);//失败

                })

3、发送post请求：

this.$http.post('http://api.fat.tianlu56.com.cn/order/orderIn/list',{

                    pageSize:'',

                    pageNo:'',

                    token:'token-5A973431EEC947459D7A0F56A31A2550'

                },{

                    emulateJSON:true

                }).then(function (data) {

                    console.log(data);//成功

                },function (res) {

                    console.log(res);//失败

                });

4、跨域请求：

方式一：

this.$http({

            method:'jsonp',

            url:'https://api.douban.com/v2/movie/top250',

            jsonp:'callback',

            params:{

                start:,

                count:

            }

          }).then(function (data) {

            console.log(data);//判断状态是否请求成功

          },function (res) {

            console.log(res);

          })

方式二：

this.$http.jsonp('https://sug.so.360.cn/suggest',

                    {params:{

                        word:'a'

                    }}

                ).then(function (resp) {

                    console.log(resp.data)

                })

三使用axios发送AJAX请求

1、安装axios并引入

　　　　1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

　　　　 2、网上直接下载axios.min.js文件

　　　　 3、通过script src的方式进行文件的引入

2、发送get请求

基本使用格式

　　　　　　格式1：axios([options]) #这种格式直接将所有数据写在options里，options其实是个字典

　　　　　　格式2：axios.get(url[,options]);

传参方式：

　　通过url传参
　通过params选项传参

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>发送AJAX请求</title>

    <script src="js/vue.js"></script>

    <script src="js/axios.min.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#itany',

                data:{

                    user:{

                        name:'alice',

                        age:

                    },

                },

                methods:{

                    send(){

                        axios({

                            method:'get',

                            url:'http://www.baidu.com?name=tom&age=23'

                        }).then(function(resp){

                            console.log(resp.data);

                        }).catch(resp => {

                            console.log('请求失败：'+resp.status+','+resp.statusText);

                        });

                    },

                    sendGet(){

                        axios.get('server.php',{

                            params:{

                                name:'alice',

                                age:

                            }

                        })

                        .then(resp => {

                            console.log(resp.data);

                        }).catch(err => {             //

                            console.log('请求失败：'+err.status+','+err.statusText);

                        });

                    },

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <button @click="send">发送AJAX请求</button>

        <button @click="sendGet">GET方式发送AJAX请求</button>

    </div>

</body>

</html>

3、发送post请求（push,delete的非get方式的请求都一样）

基本使用格式

　　　　　　格式：axios.post(url,data,[options]);

传参方式

　　　　　　1、自己拼接为键值对

　　　　　　2、使用transformRequest，在请求发送前将请求数据进行转换

　　　　　　3、如果使用模块化开发，可以使用qs模块进行转换

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>发送AJAX请求</title>

    <script src="js/vue.js"></script>

    <script src="js/axios.min.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#itany',

                data:{

                    user:{

                        name:'alice',

                        age:

                    },

                },

                methods:{

                    sendPost(){

                        // axios.post('server.php',{

                        //         name:'alice',

                        //         age:19

                        // }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据

                        // axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据

                        axios.post('server.php',this.user,{  //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串

                            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.status+','+err.statusText);

                        });

                    },

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <button @click="send">发送AJAX请求</button>

        <button @click="sendGet">GET方式发送AJAX请求</button>

    </div>

</body>

</html>

4、发送跨域请求
须知：axios本身并不支持发送跨域的请求，没有提供相应的API