Vue知识整理，让你快速入门Vue.js：04_3.网络应用：axios+vue结合使用

被开发耽误的大厨

已于 2022-06-08 00:24:54 修改

阅读量388

点赞数

分类专栏： web前端（H5）文章标签： vue.js javascript ecmascript

于 2020-03-24 18:35:23 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105078324

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

一、前言

上一节我们介绍了axios的基本使用，相比于原生的ajax，它提供的方法用起来会更加的简便，那网络数据其实现在已经可以顺利获取到了，那么它如何和Vue一起使用呢？我们这一节就来介绍axios加vue，它们在一起如何使用以及需要注意什么。

二、axios+vue简单介绍

网络应用的核心就是data里面定义的数据，一部分是通过网络获取到的，所以我们在方法中发送网络请求，在响应回来之后，把服务器返回的数据，设置给data中对应的值就可以了。代码大概是这样，如下图：

我们可以看到在Vue实例的方法中，可以通过this访问到定义在data中的数据，但是在获取网络数据之后，回调函数中的this，还是之前那个吗？如果这个this不在是之前那个，我们要怎么办呢？

为了测试，我们特意准备了一个获取随机笑话的接口，请求的方式是get方式，不需要传递参数，响应内容是一条随机的笑话

三、实例代码验证

1、实例代码

<!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>02_axios+vue_结合使用</title>
</head>

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

    <!-- 
    这次axios和vue结合一起使用，所以两个文件都要导入，它们本身没有依赖的关系。
    但是要保证编码位置，是在它们两导入之后。 
    -->
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function () {
                    // console.log(this.joke);//打印出来的是："很好笑的笑话"

                    //axios回调函数中的this已经改变，无法访问到data中数据，
                    //把this保存起来，回调函数中直接使用保存的this即可
                    //如下：定义一个that变量进行了保存
                    var that = this;

                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        
                        // console.log(response)//打印响应的全部数据
                        console.log(response.data);//打印响应中的data数据

                        //axios回调函数中的this已经改变，无法访问到data中数据。
                        // console.log(this.joke);//打印出来的是：undefined

                        that.joke = response.data;

                    }, function (err) { })
                }
            },
        })

    </script>
</body>

</html>

2、效果展示

运行程序显示，如下图：

点击“获取笑话”按钮，获取效果以及打印内容，如下图：

四、内容-总结

从全部定义在本地，变得有一部分数据是从网络获取的。

被开发耽误的大厨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue知识整理，让你快速入门Vue.js：04_3.网络应用：axios+vue结合使用

上一节我们介绍了axios的基本使用，相比于原生的ajax，它提供的方法用起来会更加的简便，那网络数据其实现在已经可以顺利获取到了，那么它如何和Vue一起使用呢？我们这一节就来介绍axios加vue更新中。。。。......
复制链接

扫一扫