Vue（七）发送Ajax请求

发送AJAX请求

1. 简介

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现

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

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

2. 使用axios发送AJAX请求

2.1 安装axios并引入

npm install axios -S

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

2.2 基本用法

axios([options])

axios.get(url[,options]);

传参方式：

1.通过url传参

2.通过params选项传参

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

axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，

所以参数必须要以键值对形式传递，不能以json形式传参

传参方式：

1.自己拼接为键值对

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    
    <script src="https://unpkg.com/vue"></script>
    <script src="axios/axios.min.js"></script>
    <script>

        window.onload=function(){
            let app = new Vue({
                el:'.container',
                data:{
                    users:{
                        name:'Maria',
                        age:18
                    },
                    GitUsers:{},
                    uid:'Somnusy'
                },
                methods:{ 
                    send(){
                        axios({
                            method:"get",
                            url:"json/user.json"
                        }).then(response => {
                            console.log('发送Ajax请求,请求成功',response.data);
                        }).catch(response => {
                            console.log('发送Ajax请求,请求失败',response);
                        })
                    },
                    //GET
                    sendGet(){
                        //传参 两种方式
                        /* axios.get('server/server.php?name=Tom&age=23') */   //通过url传参
                        axios.get('server/server-get.php',{   //通过params选项传参
                            params:{
                                name:'Jan',
                                age:18
                            }
                        })    
                        .then(response => {
                            console.log('get发送Ajax请求,请求成功',response.data)
                        })
                        .catch(response => {
                            console.log('get发送Ajax请求,请求失败',response)
                        })
                    },
                    //POST
                    sendPost(){
                        //axios.post('server/server-post.php','name=Alex&age=26')  //1.自己拼接为键值对
                        axios.post('server/server-post.php',this.users,{  //2.使用transformRequest，在请求发送前将请求数据进行转换
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&'
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(response => {
                            console.log('post发送Ajax请求,请求成功',response.data)
                        })
                        .catch(response => {
                            console.log('post发送Ajax请求,请求失败',response)
                        })   
                    },
                    
                    getUserById(uid){
                        axios.get('https://api.github.com/users/'+uid).then(response => {
                            console.log(response.data);
                            this.GitUsers=response.data;
                        }).catch(response=>{
                            console.log('请求失败');
                        })
                    }
                }
            })
        }

    </script>

</head>

<body>

<div class="container">
    <button v-on:click='send'>发送Ajax请求</button>
    <button v-on:click='sendGet'>get发送Ajax请求</button>
    <button v-on:click='sendPost'>post发送Ajax请求</button>
    
    <br>
    <br>
    <hr>
    <br>
    <br>
    <!-- 获取GitHub账号的信息-->
    GitHub ID : <input type="text" v-model="uid">
    <br>
    <br>
    <button v-on:click="getUserById(uid)">获取GitHub账户信息并显示</button>
    <p>用户信息</p>
    <p>姓名:{{GitUsers.login}}</p>
    <p>头像: <img :src="GitUsers.avatar_url" alt=""></p>
</div>

</body>

</html>