async & await & promise

最近项目中 asyn & await 用的比较多,所以特地去了解,模仿一下实现~

先来看看 使用 async & await 的方法

async function d () {
  try {
    const a = await Promise((resolve, reject) => {
        setTimeout(reject, 2000 + Math.random() * 3000)
        setTimeout(resolve, 2000 + Math.random() * 3000)
    })
    console.log(a)
  } catch (e) {
    console.log(e)
  }
}

d()

通过 async 是通过使用生成器配合yield方法模拟的一个同步JS操作,这个技术有效的避免了传统回调和promise形成的回调地狱~。async必须用在函数上,使用方法如上。在需要停止的地方加上 await 关键字,结果会根据promise的决议来决定,如果是resolve那么就会继续执行下去,否则会抛出异常,可以由try & catch捕捉。

下面是模拟async & await 的实现方法的demo

void function () {
    function *p () {
      try {
        const a = yield new Promise((resolve, reject) => {
          setTimeout(reject, 2000 + Math.random() * 3000)
          setTimeout(resolve, 2000 + Math.random() * 3000)
        })
        if (a instanceof Error) throw a
        console.log('success', a)
      } catch (e) {
        console.log('error ', e)
      }
    }
    // 执行 p 生成器
    let c = p()
    // 执行 each 遍历生成器所有 yield
    function each (res) {
      // 执行第一个 yield
      const r = c.next(res)
      // 如果还有后续 等待 then 方法回调  继续执行 遍历
      if (!r.done) {
        r.value.then(res=>{
          each(res)
        }).catch(e=>{
          // 如果报错 则返回 错误信息
          each(new Error(e))
        })
      }
    }
    each()
}()

生成器概念请点这里

通过生成器和promise配合可以在then回调的时候继续执行函数。c.next()执行后在第一个yield地方停顿并且返回yield后面的Promise,如果返回的done是true则代表函数执行结束,否则就监听then方法回调。然后递归调用自身一路next直到done为true~

总结一下

async & await是同步执行异步流程的解决方案,这个方案和Promise是紧密结合的,是基于Promise的一层封装。所以配合Promise的方法可以更好的解决异步流程~如果有什么不对的地方,盼望您能底部留言,感激不尽~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值