Vue.js与axios实战：HTTP请求与数据获取-优快云博客

本文介绍了如何在Vue项目中使用axios进行HTTP请求，包括get和post请求的使用，以及axios与Vue结合时遇到的this指向问题。同时，提到了在获取天气信息时，应注意回调函数中的this保存和数据层级结构的理解。

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

axios基本使用

axios 必须先导入才可以使用

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

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

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

注：响应错误方法时一般为 url 出错

axios官方文档：GitHub - axios/axios：用于浏览器和节点的基于 Promise 的 HTTP 客户端.js

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <script>
        /*
            接口1：随机笑话
            请求地址：https://autumnfish.cn/api/joke/list
            请求方法：get
            请求参数：num(笑话条数，数字)
            响应内容：随机笑话
        */
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=10").then(function(response){
                console.log(response);
            }),function(err){
                console.log(err)
            }
        }
        /*
            接口2：用户注册
            请求地址：https://autumnfish.cn/api/user/reg
            请求方法：post
            请求参数：username(用户名，字符串)
            响应内容：注册成功或失败
        */
        document.querySelector(".post").onclick = function (){
            axios.post("https://autumnfish.cn/api/user/reg",
            { username:"小谭工作室" })
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err)
            })
        }
    </script>
</body>

显示内容：

get请求

post请求

axios+vue

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

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

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

<body>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
    <div id="app">
        <input type="button" value="获取一条笑话" @click="getJoke">
        <p> {{ joke }} </p>
    </div>
<script>
    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.data)
                    that.joke = response.data
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

</body>

展示效果：