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的方法能夠更好的解決異步流程~若是有什麼不對的地方，盼望您能底部留言，感激涕零~