Vue网络应用

HeX_7

于 2022-04-20 10:42:29 发布

阅读量88

点赞数

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

本文链接：https://blog.csdn.net/hex_7/article/details/124265773

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.axios

必须先导入才能使用

使用get或者post方法即可发送对应请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容或错误信息

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <!-- 官网提供axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // 两条连接均已失效，看代码逻辑即可
        /*
        接口1：随机笑话：
        请求地址：http://www.autumnfish.cn/api/joke/list
        请求方法：get
        请求参数num（笑话条数，字数）
        相应内容：随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("http://www.autumnfish.cn/api/joke/list?num=3").then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })


        }
        /*
        接口2：用户注册：
        请求地址：http://www.autumnfish.cn/api/user/reg
        请求方法：post
        请求参数：username（用户名，字符串）
        相应内容：注册成功或失败
        */
        document.querySelector(".post").onclick = function(){
            axios.post("http://www.autumnfish.cn/api/user/reg",{username:"jack"}).then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
        

    </script>
</body>

2.axios+vue

axios回调函数中的this已经改变，无法访问data中数据

把this保存起来，回调函数中直接使用保存的this即可

和本地应用的最大区别就是改变了数据来源

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

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <!-- 官网提供axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
        接口1：随机笑话：
        请求地址：http://www.autumnfish.cn/api/joke
        请求方法：get
        请求参数num（笑话条数，字数）
        相应内容：随机笑话
        */  
        
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    console.log(this.data);//控制台打印很好笑的笑话
                    //两个this不一样说明this所指向的会变
                    //那就将this赋值that
                    var that = this;
                    axios.get("http://www.autumnfish.cn/api/joke").then(function(response){
                        console.log(response.data);
                        //利用that调用
                        //console.log(this.joke);//控制台打印undefined
                        that.joke = response.data;
                    },function(err){     })
                }
            }
        })


    </script>

</body>