Vue 两种处理异步的方式 Promise Async/Await
使用场景为需要请求4个接口,每个接口会返回一个数字,最终将他们相加显示出来。我使用下来,个人偏向于使用Async/Await,感觉代码更简洁、易读,就按顺序写下来就是了。先是使用Promise的例子:getTotalNum(){let getOneEvent = new Promise((resolve) => {this.$api.getApiOne(params).then(res =&
·
使用场景为需要请求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;
}
更多推荐
已为社区贡献3条内容
所有评论(0)