async/await实现同步

同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作。这时程序是阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。 因此 简单的说,同步就是必须一件一件事做,等前一件做完了才能做下一件事。

异步,与同步相对,当一个异步过程调用发出后,调用者在没有得到结果之前,就可以继续执行后续操作。当这个调用完成后,一般通过状态、通知和回调来通知调用者。
————————————————

没有实现同步代码。错误代码示范如图:并没有实现异步效果。await没有实现阻塞

解决方案:

async的作用:

先从字面意思来理解。async是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。

async 函数返回的是一个 Promise 对象。async 函数(包含函数语句、函数表达式)会返回一个 Promise 对象,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

async 函数返回的是一个 Promise 对象,所以在最外层不能用 await 获取其返回值的情况下,我们当然应该用原来的方式:then() 链来处理这个 Promise 对象

 -> 输出结果 

 如果async函数没有返回值会返回undefined

在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且,绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数是一样的

await作用:

await 等待的是一个表达式,这个表达式的计算结果是 Promise 对象或者其它值(换句话说,就是没有特殊限定)。

async 函数返回一个 Promise 对象,所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数,但要清楚,它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象,它可以等任意表达式的结果,所以,await 后面实际是可以接普通函数调用或者直接量的

     如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。

     如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。

    其实这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞,它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。

所以修改代码如下,实现异步,完美解决

实际应用举例:

    // 同步获取列表数据
    async getTableList () {
      // 获取待办分类
      let classifyRes = await this.getTodoClassify()
      // 根据分类获取动态表头
      let columnRes = await this.getTodoTableColumn()
      // 根据表名和动态表头获取列表数据
      let tableListRes = await this.getToDoList()

      console.info(classifyRes, 'classifyRes')
      console.info(columnRes, 'classifyRes222')
      console.info(tableListRes, 'classifyRes333')
    },

// 获取所有待办分类
    getTodoClassify () {
      return new Promise((resolve, reject) => {
        apiGetTodoClassify().then((res) => {
          resolve(res)
        }).catch((err) => {
          reject(err)
        })
      })
    },
    // 获取动态表头
    getTodoTableColumn () {
      return new Promise((resolve, reject) => {
        apiGeTodoTableColumn({
          taskTypeCode: this.tableName
        }).then((res) => {
          resolve(res)
        }).catch((err) => {
          reject(err)
        })
      })
    },
    // 获取待办列表数据
    getToDoList () {
      return new Promise((resolve, reject) => {
        apiQuerytaskdetaillist({
          tableName: this.tableName,
          status: this.status,
          keyword: this.keyword
        }).then((res) => {
          resolve(res)
        }).catch((err) => {
          reject(err)
        })
      })
    },

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值