async、await异步请求

async、await用于异步请求,await必须在async中不然会报错。

async放在函数前面就可以了,表明这是一个异步函数,不会阻塞后面代码地执行,异步函数调用的话和其他函数一样。默认返回的是一个Promise对象,如果需要获取Promise的话可以用then方法。

await就是等待,等待一个Promise对象,只能在async声明的异步函数中使用。await阻塞的是异步函数中的操作,对外部代码没有影响,这个操作大多是发送请求拿数据。

案例:Vue中设置一个侦听器,数据变化时清除上一个计时器,然后增加一个计时器,超出计时器的时间就执行一个异步函数,使用axios发送请求获取数据,然后更新双向绑定的数据,进而更新视图。

复制代码
watch:{
    'obj.words'(newValue){
        clearTimeout(this.timer)
        this.timer = setTimeout(async ()=>{
            const res = await axios({
                url:'https://applet-base-api-t.itheima.net/api/translate',
                params:{
                    words:newValue
                }
            })
            this.result = res.data.data
        },300)
    }
}
复制代码

 注1:如果在业务中同时发送两个请求,且第二个请求携带的参数需要用到第一个请求的返回值。这时一定要将其放在一个异步函数中,第一个请求需要在前面加上await阻断,不然第二个请求在参数还未获取的状态下就进行发送返回值会错误。(在练习过程中遇到这个问题,第一个请求获取一个值,第二个传入这个值生成一个二维码。因为没有阻断执行导致生成一个错误的二维码。找半天才找出这个问题)

注2:请求中不能包请求。

注3:参数别传错了。(今天从一个请求获取参数,获取错了信息。这个错的信息又传到第二个请求中结果没有正确的返回值,找很久才发现)

posted @   数星观月  阅读(242)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示