美文网首页前端开发那些事儿
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处理多个互相依赖的异步请求

    用了自己项目数据字典作为案例, 首先定义好每个请求方法(remote是项目中自己定义的数据字典接口请求方法),每个...

  • Promise和async/await

    Promise和async/await都是异步处理的方法。async/await看起来更简单易用。 Promise...

  • 同步异步编程,微任务/宏任务

    同步异步编程 异步的有 : 定时器 事件绑定 Promise/async/await Ajax异步请求数...

  • async/await和Promise杂谈

    前言 Promise和async/await是当前前端最常见的异步程序处理方式,async/await是基于Pro...

  • ES7 中 async await

    处理多个之间相互依赖的请求,使用async和await会更加优雅。async/await规则一、凡是在前面添加了a...

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • Future函数使用

    Future常用方法: 多个网络请求同时进行: await、async模拟异步网路请求: Future模拟异步网络请求:

  • Async/Await VS Promise

    Async/Await VS Promise Async/await 是一种编写异步代码的新方法。之前异步代码的方...

  • async,await,promise.all()简单描述

    async,await,promise.all()应用简单的描述,同步处理异步,await字面意思等待。首先三个p...

  • Promise 的使用

    Promise是解决异步的一种方案,可以更优雅的解决多个请求回调的问题,提高代码可读性。有 async/await...

网友评论

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

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