axios结合vue在线获取一条笑话

散一世繁华，颠半世琉璃

已于 2022-09-15 19:17:35 修改

阅读量1.2w

点赞数 4

分类专栏： vue 文章标签： vue.js axios

于 2022-03-24 20:26:12 首次发布

本文链接：https://blog.csdn.net/qq_51447436/article/details/123720229

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.导入引入vue和axios在线地址

    <!-- 官方提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.创建一个div容器

在div容器里面放一个在线获取笑话的按钮，以及渲染笑话的p标签，通过v-on指令绑定具体的方法给按钮。

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

joke是定义在Vue实例中的数据，getJoke是通过axios获取笑话的方法，文章下面均会介绍。

3.创建一个Vue实例

在里面通过el绑定div容器，在data中定义了一个为joke的变量，定义了通过axios获取笑话的getJoke方法。
注意，由于this在经过axios前后会发生改变，所以我们需要将this保存起来。

<script>
        /*
        接口:随机获取一条笑话
        请求地址:https://autumnfish.cn/api/joke
        请求方式:get
        请求参数:无
        响应内容:随机笑话
        */
       var app=new Vue({
           el:"#app",
           data:{
               joke:"很好笑的笑话"
           },
           methods:{
               getJoke:function(){
                   //因为this在经过axios会改变，所以需要将axios保存起来
                   var that=this;
                   axios.get("https://autumnfish.cn/api/joke")
                   .then(function(response){
                       console.log(response);
                       console.log(response.data);
                       that.joke=response.data;
                   },function(error){
                       console.log(error);
                   })
               }
           }
       })
    </script>

4.完整代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios+vue</title>
    <!-- 官方提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script>
        /*
        接口:随机获取一条笑话
        请求地址: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);
                       console.log(response.data);
                       that.joke=response.data;
                   },function(error){
                       console.log(error);
                   })
               }
           }
       })
    </script>
</body>
</html>