美文网首页前端开发那些事儿
promise/async,await处理多个互相依赖的异步请求

promise/async,await处理多个互相依赖的异步请求

作者: 掉毛蛙 | 来源:发表于2021-01-07 15:58 被阅读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

    相关文章

      网友评论

        本文标题:promise/async,await处理多个互相依赖的异步请求

        本文链接:https://www.haomeiwen.com/subject/abmzoktx.html