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的方法可以更好的解决异步流程~如果有什么不对的地方，盼望您能底部留言，感激不尽~