昨天在做公司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('获取到地区码')
let code
= [
859991,1549665
]
resolve(code
)
}, 5000);
})
},
getListData(){
setTimeout(() => {
console
.log('根据地区码，获取到列表')
}, 1000);
}
}
执行结果
:
获取到地区码
[859991, 1549665]
根据地区码，获取到列表
使用async、await之后将会一直等待getAreaCode()方法请求回来之后，才会去执行getListData()方法获取列表。有一点需要注意的是await 后面跟着的方法返回必须是Promise类型。
