前端开发那些事儿

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
上一篇 下一篇

猜你喜欢

热点阅读