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的方法能够更好的解决异步流程~若是有什么不对的地方，盼望您能底部留言，感激涕零~