Vue axios + Vue使用

news2024/11/15 17:39:50

相对于原生的阿贾克斯，axios提供的方法使用起来会更加的简便，之前网络数据获取到了，如何和vue一起使用呢？

网络应用的核心就是data中的数据一部分是通过网络获取到的。所以在方法当中发起网络请求，在响应回来之后将服务器返回的数据设置给data当中对应的值就行了！

返回的对象是response，里面有很多的属性，我们需要拿到的是data的属性。

在axios外面和里面，this会发生变化，很简单，那么就将this存储起来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
    </style>
</head>

<body>    
   <div id="vue">
        <button type="button" @click="getjokemsg()">get请求</button>
        <p>{{ jokemsg }}</p>
   </div>


    <script type="text/javascript">
      new Vue({   
          el: "#vue",   
          data:{ 
             jokemsg: "很好笑的笑话"
          },
          methods:{
            getjokemsg:function(){
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then(
                    function(response){
                       console.log(response.data);
                       that.jokemsg = response.data;
                    },
                    function(err){
                       console.log(err)
                    }
                )

            },    
       }
    }
)
          
    </script>

</body>

</html>