async、await异步请求

发布时间 2023-09-12 10:26:44作者: 数星观月

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)
    }
}