Vue中使用axios

分手后的思念是犯贱 2023-06-25 11:28 16阅读 0赞

<body>
        <div id="app">
            <input type="button" value="获取笑话" @click="getJoke1" />
            <p>{ { joke}}</p>
        </div>
    
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            var vue = new Vue({ 
                el: "#app",
                data: { 
                    joke: "笑话"
                },
                methods: { 
                    // get
                    getJoke1: function () { 
                        var that = this;
                        var url = "https://autumnfish.cn/api/joke?userName=jack";
                        axios.get(url).then(function (response) { 
                            // axios回调函数中的this已经改变，无法访问到data中的数据，解决：把this保存起来，回调函数中直接使用保存的this即可
                            that.joke = response.data;
                        }).catch(function (error) { 
                            // 异常
                            that.joke = error
                        })
                    },
                    // post
                    getJoke2: function () { 
                        var that = this;
                        var url = "https://autumnfish.cn/api/joke";
                        var parames = {  userName: "jack" }
                        axios.post(url, parames).then(function (response) { 
                            that.joke = response.data;
                        }).catch(function (error) { 
                            // 异常
                            that.joke = error
                        })
                    },
                    // 同步
                    getJoke3: function () { 
                        var url = "https://autumnfish.cn/api/joke?userName=jack";
                        var response = axios.get(url);
                        this.joke = response.data;
                    }
                }
            })
        </script>
    </body>