网络请求库：axios

这个网络请求库内部是ajax,封装之后使用更为便捷，且其功能就是发送请求，因此容量很小，还能很方便地和其他库结合，比如vue.

首先当然是导包，这一步不再啰嗦。只要在一个script标签中添加：src="https://unpkg.com/axios/dist/axios.min.js"就可以了。

其请求方式共有两种，分别是get和post.其格式均为：axios.方式(请求地址).then(function(){}, function(){}).对于具体的请求方式，请求地址后跟的参数会有所不同。then方法中的回调函数会在请求成功或失败时触发。成功时，调用的是第一个回调函数；失败时则为第二个。我们具体看看这两种请求方式应该怎么写，写一起好了：

<!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>Title</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        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);
            })
        }
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",
                {username:"其他用户名"}).then(function (response) {
                    console.log(response);
            }, function (err) {
                    console.log(err);
            })
        }
    </script>
</body>
</html>

此时在对应的页面中会出现两个按钮，差不多长这样：

先看get：

get请求的是一个笑话网站，因此这里我获取了6个笑话。其方式就是在请求地址后面加个参数，num=6就行了，本质就是键值对的形式。

接下来看post:

如果我再点一次post请求按钮：

所以注册啥的还是没问题的。

当然了，如果请求地址出错，那么肯定是会打印出对应的错误信息的，这里就不演示了。

我们来看看axios和vue的结合：

现在我想用get方式在那个笑话的网站获取笑话，并希望一点击一个按钮，下面就会有一条笑话显示出来，再点击，笑话更新。

显然，我们需要一个笑话的数据渲染在按钮下面，直接在data中定义一个joke就好了，随便给个初始值。

然后需要一个按钮，这个按钮还要绑定一个函数，这个函数里面，显然就是axios请求的代码。

当然了，由于我们定义在data中的joke这个是有一个初始值的，而我们想要实现点击就更新的话，其本质就是把获取到的数据赋给这个joke.但是，这里会有一个问题，我们可以直接this.joke = response.data吗？答案是不行的，我直接说了就。你可以去测试一下，这里的this.joke会变（打印出来是：undefined）。因此，我们还需要在axios发送请求之前，把这个原来的数据保存，直接var that = this就可。

下面看代码：

<!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>Title</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function () {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        that.joke = response.data;
                        console.log(response.data);
                        console.log(this.joke);
                    }, function (err) {
                        console.log(err);
                    })
                }
            }
        })
    </script>
</body>
</html>

效果：

现在我点击一下那个按钮：

posted @ 2022-02-15 23:45 EvanTheBoy 阅读(198) 评论(0) 收藏举报

刷新页面返回顶部

EvanTheBoy

网络请求库：axios

公告