async & await & promise

Dean 發(fā)布于2019-08-22 17:31 / 3382人閱讀

摘要：最近項(xiàng)目中用的比較多，所以特地去了解，模仿一下實(shí)現(xiàn)先來(lái)看看使用的方法通過(guò)是通過(guò)使用生成器配合方法模擬的一個(gè)同步操作，這個(gè)技術(shù)有效的避免了傳統(tǒng)回調(diào)和形成的回調(diào)地獄。

最近項(xiàng)目中 asyn & await 用的比較多，所以特地去了解，模仿一下實(shí)現(xiàn)~

先來(lái)看看使用 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()

通過(guò) async 是通過(guò)使用生成器配合yield方法模擬的一個(gè)同步JS操作，這個(gè)技術(shù)有效的避免了傳統(tǒng)回調(diào)和promise形成的回調(diào)地獄~。async必須用在函數(shù)上，使用方法如上。在需要停止的地方加上 await 關(guān)鍵字，結(jié)果會(huì)根據(jù)promise的決議來(lái)決定，如果是resolve那么就會(huì)繼續(xù)執(zhí)行下去，否則會(huì)拋出異常，可以由try & catch捕捉。

下面是模擬async & await 的實(shí)現(xiàn)方法的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)
      }
    }
    // 執(zhí)行 p 生成器
    let c = p()
    // 執(zhí)行 each 遍歷生成器所有 yield
    function each (res) {
      // 執(zhí)行第一個(gè) yield
      const r = c.next(res)
      // 如果還有后續(xù) 等待 then 方法回調(diào)  繼續(xù)執(zhí)行 遍歷
      if (!r.done) {
        r.value.then(res=>{
          each(res)
        }).catch(e=>{
          // 如果報(bào)錯(cuò) 則返回 錯(cuò)誤信息
          each(new Error(e))
        })
      }
    }
    each()
}()

生成器概念請(qǐng)點(diǎn)這里

通過(guò)生成器和promise配合可以在then回調(diào)的時(shí)候繼續(xù)執(zhí)行函數(shù)。c.next()執(zhí)行后在第一個(gè)yield地方停頓并且返回yield后面的Promise，如果返回的done是true則代表函數(shù)執(zhí)行結(jié)束，否則就監(jiān)聽(tīng)then方法回調(diào)。然后遞歸調(diào)用自身一路next直到done為true~

總結(jié)一下

async & await是同步執(zhí)行異步流程的解決方案，這個(gè)方案和Promise是緊密結(jié)合的，是基于Promise的一層封裝。所以配合Promise的方法可以更好的解決異步流程~如果有什么不對(duì)的地方，盼望您能底部留言，感激不盡~