promise/async,await处理多个互相依赖的异步请求
2021-01-07 本文已影响0人
掉毛蛙
用了自己项目数据字典作为案例,
首先定义好每个请求方法(remote是项目中自己定义的数据字典接口请求方法),每个方法return出下一个请求需要的数据。
dictA(){
return remote('log_type').then(response => {
const code = response.data.code;
if (code === 0) {
console.log('aaaaaaaa','log_type')
return 'social_type'
}
});
},
dictB(type){
return remote(type).then(response => {
const code = response.data.code;
if (code === 0) {
console.log('bbbbbbbbbb',type)
return 'job_type'
}
});
},
dictC(type){
return remote(type).then(response => {
const code = response.data.code;
if (code === 0) {
console.log('cccccccccccc',type)
return '哈哈哈哈哈哈哈哈哈哈'
}
});
},
promise方式处理
dictAll(){
this.dictA().then(res =>{
return this.dictB(res)
}).then(res => {
return this.dictC(res)
}).then(res => {
this.test = res
console.log(this.test)
})
},
async/await方式处理
async dictAll(){
let A = await this.dictA()
let B = await this.dictB(A)
this.test = await this.dictC(B)
console.log(this.test)
},
两种方式控制台打印如下
image.png
页面渲染成功
<div>{{test}}</div>
image.png