网络应用axios学习笔记

最新推荐文章于 2023-10-31 12:40:26 发布

Yvonne978

最新推荐文章于 2023-10-31 12:40:26 发布

阅读量80

点赞数

文章标签：笔记 vue.js

本文链接：https://blog.csdn.net/qq_41206014/article/details/132346271

版权

axios是功能强大的网络请求库

一. axios基本使用

引入依赖：<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

以上分别是get和post请求的写法

两个接口如下：

随机获取笑话的接口 get请求地址：autumnfish.cn/api/joke/list?num=3

用户注册的接口 post请求地址：https://autumnfish.cn/api/user/reg {"username": "111"}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        <input type="button" value="get请求" class="get" />
        <input type="button" value="post请求" class="post" />
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <!-- 这个会有问题，用下面那个 -->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <script>
        /*
            接口1：随机笑话
            请求地址：https://autumnfish.cn/api/joke/list?num=3
            请求方法：get
            请求参数：num
            响应内容：随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        }

        /*
            接口1：用户注册
            请求地址：https://autumnfish.cn/api/user/reg
            请求方法：post
            请求参数：username
            响应内容：用户注册成功或失败
        */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg", { username: "jack" })
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        }
    </script>
</body>

</html>

二. axios和vue一起使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke" />
        <p>{{joke}}</p>
    </div>

    <!-- vue引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <!-- 这个会有问题，用下面那个 -->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <script>
        /*
            接口1：随机笑话
            请求地址：https://autumnfish.cn/api/joke
            请求方法：get
            请求参数：无
            响应内容：随机笑话
        */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function () {
                    // 解决办法：将获取到的对象存起来
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then
                        (function (response) {
                            console.log(response.data);
                            // 在axios内部，this不起作用，所以joke无法更新
                            // console.log(this.joke);
                            // this.joke = response.data;
                            that.joke = response.data;

                        }, function (err) {
                            console.log(err);
                        })
                }
            }
        })

        /*
            接口1：用户注册
            请求地址：https://autumnfish.cn/api/user/reg
            请求方法：post
            请求参数：username
            响应内容：用户注册成功或失败
        */
    </script>
</body>

</html>

注意：axios内部获取不到Vue对象的数据，解决办法如上