WEB前端：vuejs全家桶（12）：使用axios发送GET、POST请求、获取指定GitHub账户信息并显示

最新推荐文章于 2022-11-07 11:01:39 发布

hahahafree

最新推荐文章于 2022-11-07 11:01:39 发布

阅读量372

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102948690

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

发送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添加支持发送跨域请求，所以只能使用第三方库

3.1、 axios([options])

<!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:19
                    },
                    uid: ''
                },
                methods: {
                    send() {
                        axios({
                            method: 'get',
                            url: 'user.json'
                        }).then(function(resp) {
                            console.log(resp.data);
                        }).catch(resp => {
                            // console.log(resp);
                            console.log('请求失败：' + resp.status + ',' + resp.statusText);
                        });
                    },
                }
            });
        }
    </script>

</head>

<body>
    <div class="itany">
        <button @click="send">发送AJAX请求</button>
    </div>
</body>

</html>

3.2、axios.get(url[,options]);

    传参方式：
        1.通过url传参

axios.get('/user?id=12345&name=user')
.then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

3.3、通过params选项传参

index.html

<!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',

                methods: {
                    sendGet() {
                        // axios.get('server.php?name=tom&age=23')
                        axios.get('server.php', {
                                params: {
                                    name: 'alice',
                                    age: 19
                                }
                            })
                            .then(resp => {
                                console.log(resp);
                            }).catch(err => {
                                console.log('请求失败：' + err.status + ',' + err.statusText);
                            });
                    },
                }
            });
        }
    </script>

</head>

<body>
    <div class="itany">
        <button @click='sendGet'>点我发送GET请求！</button>
    </div>
</body>

</html>

index.php

<?php
	//获取参数
	$name=$_GET['name'];
	$age=$_GET['age'];

	//响应数据
	echo '姓名：',$name,',年龄：',$age;
?>

GET和POST调试的时候，注意后端代码是不是一致的。

POST请求方法1：用 URLSearchParams 传递参数

参考
https://www.cnblogs.com/yiyi17/p/9409249.html

<!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',

                methods: {

                    sendPost() {
                        let param = new URLSearchParams()
                        param.append('name', 'admin')
                        param.append('age', 29)
                            // axios.get('server.php?name=tom&age=23')
                        axios({
                            method: 'post',
                            url: 'server.php',
                            data: param
                        }).then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('请求失败：' + err.status + ',' + err.statusText);
                        });;
                    }
                }
            });
        }
    </script>

</head>

<body>
    <div class="itany">
        <button @click='sendPost'>点我发送POST请求！</button>
    </div>
</body>

</html>

<?php
	//获取参数
	$name=$_POST['name'];
	$age=$_POST['age'];

	//响应数据
	echo '姓名：',$name,',年龄：',$age;
?>

在这里插入图片描述

POST请求方法2：自己拼接为键值对

<!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: 19
                    },

                },
                methods: {

                    sendPost() {
                        axios.post('server.php', this.user, {
                                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 class="itany">
        <button @click='sendPost'>点我发送POST请求！</button>
    </div>
</body>

</html>

获取指定GitHub账户信息并显示

<!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: {},
                    uid: ''
                },
                methods: {
                    getUserById(uid) {
                        axios.get(`https://api.github.com/users/${uid}`)
                            .then(resp => {
                                // console.log(resp.data);
                                this.user = resp.data;
                            });
                    },
                },


            });
        }
    </script>

</head>

<body>
    <div class="itany">
        GitHub ID： <input type="text" v-model="uid">
        <button @click="getUserById(uid)">获取指定GitHub账户信息并显示</button>
        <br> 姓名：{{user.name}} <br> 头像：
        <img :src="user.avatar_url" alt="">

        <hr>
    </div>
</body>

</html>