昨天在做公司Vue项目时遇到了异步问题,正好是需要使用到async、await、promise这三个关键字。这里我简单的描述下问题:
页面需要在页面初始化的时候先请求接口获取地区码,在使用地区码继续请求获取列表数据。(要求不能使用套娃的方式请求)
问题代码重现
created(){
this.getAreaCode() //获取地区码
this.getListData() //获取列表
},
methods:{
getAreaCode(){
setTimeout(() => {
console.log('获取到地区码')
}, 5000);
},
getListData(){
setTimeout(() => {
console.log('根据地区码,获取到列表')
}, 1000);
}
}
执行结果:
根据地区码,获取到列表
获取到地区码
由于获取地区码的接口请求太久,就会出现地区码还没回来就请求获取列表 ,这明显会出现问题。之所以出现这个问题,要还是异步操作造成的,下面列出两种方式来解决。
套娃方式解决
created(){
this.getAreaCode() //获取地区码
},
methods:{
getAreaCode(){
setTimeout(() => {
console.log('获取到地区码')
this.getListData();
}, 5000);
},
getListData(){
setTimeout(() => {
console.log('根据地区码,获取到列表')
}, 1000);
}
}
执行结果:
获取到地区码
根据地区码,获取到列表
使用async、await、promise解决异步
async created(){
let promise= await this.getAreaCode() //获取地区码
console.log(promist);
this.getListData() //获取列表
},
methods:{
getAreaCode(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('获取到地区码')
//模拟返回的code码
let code = [
859991,1549665
]
//模拟成功
resolve(code)
}, 5000);
})
},
getListData(){
setTimeout(() => {
console.log('根据地区码,获取到列表')
}, 1000);
}
}
执行结果:
获取到地区码
[859991, 1549665]
根据地区码,获取到列表
使用async、await之后将会一直等待getAreaCode()方法请求回来之后,才会去执行getListData()方法获取列表。有一点需要注意的是await 后面跟着的方法返回必须是Promise类型。