axios实现GET/POST_axios是如何做到.get .post-CSDN博客

本文链接：https://blog.csdn.net/qq_41113081/article/details/113664237

本文介绍如何使用Vue.js和axios库进行GET和POST请求，展示了如何从AutumnFish API获取笑话并注册用户，适合前端开发者学习基础HTTP操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1>{{text}}</h1>
        <input type="button" value="Get请求：获取文字" @click="getText">
        <input type="text" v-model="inputVal">
        <input type="button" value="Post请求:注册" @click="register">

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                text: "",
                img: "",
                inputVal: ""
            },
            methods: {
                getText() {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        that.text = response.data;
                    }).catch(function (error) {
                        console.error(error);
                    })
                },
                register() {
                    var that = this;
                    axios.post("https://autumnfish.cn/api/user/reg", { username: that.inputVal }).then(function (response) {
                        that.text = response.data;
                    }).catch(function (error) {
                        console.error(error);
                    })
                }
            }
        });

    </script>
</body>

</html>