async & await & promise

Dean 發布于2019-08-22 17:31 / 3374人閱讀

摘要：最近項目中用的比較多，所以特地去了解，模仿一下實現先來看看使用的方法通過是通過使用生成器配合方法模擬的一個同步操作，這個技術有效的避免了傳統回調和形成的回調地獄。

最近項目中 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的方法可以更好的解決異步流程~如果有什么不對的地方，盼望您能底部留言，感激不盡~

GPU云服務器云服務器 async await await-async async-await asp &amp&amp邏輯

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95248.html

Promise &amp;&amp; async/await的理解和用法

摘要：但是中的這種情況與抽象反應器模式如何描述完全不同。在處理一個階段之后并且在移到下一個隊列之前，事件循環將處理兩個中間隊列，直到中間隊列中沒有剩余的項目。如果沒有任務則循環退出，每一次隊列處理都被視為事件循環的一個階段。 Promise && async/await的理解和用法為什么需要promise（承諾）這個東西在之前我們處理異步函數都是用回調這個方法，回調嵌套的時候會發現閱讀...

王笑朝 2019-08-26 12:17 評論0 收藏0
async &amp; await (譯)

摘要：的出現，讓我們可以走出回調地獄，著實驚艷。我已經開始使用里的和關鍵字來簡化的處理。異步任務在這個例子是執行之后，一直在執行完成才繼續下一個任務并沒有產生阻塞。最后這個函數處理了返回值并且返回了一個對象。依然很棒，但和使得它可維護性更好。 JavaScript Promises的出現，讓我們可以走出回調地獄，著實驚艷。Promises 允許我們更好的引入和處理異步任務，雖然如此，但引入好...

The question 2019-08-22 11:07 評論0 收藏0
async/await 和 Promise 的用例&amp;關系

摘要：和的關系和的關系非常的巧妙，必須在內使用，并裝飾一個對象，返回的也是一個對象。的會使得的代碼節點自動拋出相應的異常，終止向下繼續執行。示例方法內無節點沒有修飾的方法內有節點注意內的對節點的作用。假設我們有三個請求，req1，req2, req3，三個請求后者依賴前者的請求結果。我們先使用Promise封裝一個異步請求的方法。 Promise 異步請求使用Promise可以非常容易的...

y1chuan 2019-08-26 18:37 評論0 收藏0
ES6&amp;ES7中的異步之async函數

摘要：更好的語義和分別表示異步和等待，比起和更容易理解。前邊聲明關鍵字，表示內部有內部操作，調用函數會返回一個對象。等價于其中函數就是自動執行器。 async函數定義 async函數其實就是之前說過的Generator的語法糖，用于實現異步操作。它是ES2017的新標準。讀取兩個文件: const fs = require(fs) const readFile = function(f...

dongxiawu 2019-08-21 17:36 評論0 收藏0
詳解JS前端并發多個相同的請求控制為只發一個請求方式

　　描述如下　　我們要同時發多個相同的請求，第一個請求成功后，剩余結果都不會發出，返回結果是成果?！　〖偃绲谝粋€反饋失敗，第二個是成功，后面就不會發出，后面都直接反饋成功。第三個才是成功的話，后面就不會在發出，后面都反饋成功。依次如此處理，直至最后一個?！　　　〔l：一個接口請求還處于pending，短時間內就發送相同的請求　　asyncfunctionfetchData(a){ 　　const...

3403771864 2022-10-16 16:39 評論0 收藏0