使用场景为需要请求4个接口,每个接口会返回一个数字,最终将他们相加显示出来。我使用下来,个人偏向于使用Async/Await,感觉代码更简洁、易读,就按顺序写下来就是了。
先是使用Promise的例子:
getTotalNum(){
let getOneEvent = new Promise((resolve) => {
this.$api.getApiOne(params).then(res => {
if(res.status == 1){
oneNum = res.body.num
}
resolve(oneNum)
}).catch(function() {
});
})
let getTwoEvent = new Promise((resolve) => {
this.$api.getApiTwo(params).then(res => {
if(res.status == 1){
twoNum = res.body.num
}
resolve(twoNum)
}).catch(function() {
});
})
let getThreeEvent = new Promise((resolve) => {
this.$api.getApiThree(params).then(res => {
if(res.status == 1){
threeNum = res.body.num
}
resolve(threeNum)
}).catch(function() {
});
})
let getFourEvent = new Promise((resolve) => {
this.$api.getApiFour(params).then(res => {
if(res.status == 1){
fourNum = res.body.num
}
resolve(workflowNum)
}).catch(function() {
});
})
Promise.all([getOneEvent,getTwoEvent,getThreeEvent,getFourEvent]).then(() => {
this.totalNum = oneNum + twoNum + threeNum + fourNum;
}).catch((error) => {
console.log(error)
})
}
使用Async/Await:
async getTotalNum(){
await this.$api.getApiOne(params).then(res => {
if(res.status == 1){
oneNum = res.body.num
}
}).catch(function() {
});
await this.$api.getApiTwo(params).then(res => {
if(res.status == 1){
twoNum = res.body.num
}
}).catch(function() {
});
await this.$api.getApiThree(params).then(res => {
if(res.status == 1){
threeNum = res.body.num
}
}).catch(function() {
});
await this.$api.getApiFour(params).then(res => {
if(res.status == 1){
fourNum = res.body.num
}
}).catch(function() {
});
this.totalNum = oneNum + twoNum + threeNum + fourNum;
}