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

浙公网安备 33010602011771号