Vue+axios

本文介绍了如何在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>

展示效果:

 

 


天气信息获取

应用的逻辑代码建议和页面 分离 ,使用单独js 文件编写

axios 回调函数中 this 指向改变了,需要额外的保存一份

服务器返回的数据比较复杂时,获取的时候需要注意 层级 结构

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值