<li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    首頁»JavaScript»如何正確使用async/await?

    如何正確使用async/await?

    來源:infoq 發布時間:2018-08-01 閱讀次數:

      ES7引入的async/await是JavaScript異步編程的一個重大改進,提供了在不阻塞主線程的情況下使用同步代碼異步訪問資源的能力。在本文中,我們將從不同的角度探索async/await,并演示如何正確有效地使用它們。

     async/await的好處

      async/await給我們帶來的最重要的好處是同步編程風格。我們來看一個例子。

    // async/await
    async getBooksByAuthorWithAwait(authorId) {
      const books = await bookModel.fetchAll();
      return books.filter(b => b.authorId === authorId);
    }
    // promise
    getBooksByAuthorWithPromise(authorId) {
      return bookModel.fetchAll()
        .then(books => books.filter(b => b.authorId === authorId));
    }

      很顯然,async/await比promise更容易理解。如果忽略掉await關鍵字,代碼看起來與其他任意一門同步語言一樣(如Python)。

      除了可讀性,async/await還對瀏覽器提供了原生支持。目前所有的主流瀏覽器都完全支持異步功能。

    ??

      原生支持意味著不需要編譯代碼。更重要的是,它調試起來很方便。在函數入口設置斷點并執行跳過await行之后,調試器會在bookModel.fetchAll()執行時暫停一會兒,然后移動到下一行(也就是.filter)!這比使用promise要容易調試得多,因為你必須在.filter這一行設置另一個斷點。

    ??

      另一個好處是async關鍵字,盡管看起來不是很明顯。它聲明getBooksByAuthorWithAwait()函數的返回值是一個promise,因此調用者可以安全地調用getBooksByAuthorWithAwait().then(…)或await getBooksByAuthorWithAwait()。比如像下面這段代碼:

    getBooksByAuthorWithPromise(authorId) {
      if (!authorId) {
        return null;
      }
      return bookModel.fetchAll()
        .then(books => books.filter(b => b.authorId === authorId));
      }
    }

      在上面的代碼中,getBooksByAuthorWithPromise可能返回一個promise(正常情況)或null(異常情況),在這種情況下,調用者無法安全地調用.then()。而如果使用async聲明,則不會出現這種情況。

     async/await可能會引起誤解

      有些文章將async/await與promise進行了比較,并聲稱它是JavaScript異步編程演變的下一代,但我非常不同意這一觀點。async/await是一種改進,但它不過是一種語法糖,它不會完全改變我們的編程風格。

      從本質上講,異步函數仍然是promise。在正確使用異步函數之前,你必須了解promise,更糟糕的是,大部分時間需要同時使用promise和異步函數。

      考慮上例中的getBooksByAuthorWithAwait()和getBooksByAuthorWithPromises()函數。請注意,它們不僅功能相同,接口也是完全一樣的!

      這意味著如果直接調用getBooksByAuthorWithAwait(),它將返回一個promise。

      不過這不一定是件壞事。只是await會給人一種感覺:“它可以將異步函數轉換為同步函數”。但這實際上是錯誤的。

     async/await的陷阱

      那么人們在使用async/await時可能會犯什么錯誤?下面列舉了一些常見的錯誤。

      太過串行化

      雖然await可以讓你的代碼看起來像是同步的,但請記住,它們仍然是異步的,要避免太過串行化。

    async getBooksAndAuthor(authorId) {
      const books = await bookModel.fetchAll();
      const author = await authorModel.fetch(authorId);
      return {
        author,
        books: books.filter(book => book.authorId === authorId),
      };
    }

      上面的代碼在邏輯上看起來很正確,但這樣做其實是不對的。

    1. await bookModel.fetchAll()將等到fetchAll()返回。
    2. 然后await authorModel.fetch(authorId)將被調用。

      注意,authorModel.fetch(authorId)不依賴bookModel.fetchAll()的結果,事實上它們可以并行調用!然而,因為在這里使用了await,兩個調用變成串行的,總的執行時間將比并行版本要長得多。

      正確的方法應該是:

    async getBooksAndAuthor(authorId) {
      const bookPromise = bookModel.fetchAll();
      const authorPromise = authorModel.fetch(authorId);
      const book = await bookPromise;
      const author = await authorPromise;
      return {
        author,
        books: books.filter(book => book.authorId === authorId),
      };
    }

      或者更糟糕的是,如果你想要逐個獲取物品清單,你必須使用promise:

    async getAuthors(authorIds) {
      // WRONG, this will cause sequential calls
      // const authors = _.map(
      //   authorIds,
      //   id => await authorModel.fetch(id));
    // CORRECT
      const promises = _.map(authorIds, id => authorModel.fetch(id));
      const authors = await Promise.all(promises);
    }

      總之,你仍然需要將流程視為異步的,然后使用await寫出同步的代碼。在復雜的流程中,直接使用promise可能更方便。

     錯誤處理

      在使用promise時,異步函數有兩個可能的返回值。對于正常情況,可以使用.then(),而對于異常情況,則使用.catch()。不過在使用async/await時,錯誤處理可能會變得有點蹊蹺。

      try…catch

      最標準的(也是我推薦的)方法是使用try…catch語句。在調用await函數時,如果出現非正常狀況就會跑出異常。比如:

    class BookModel {
      fetchAll() {
        return new Promise((resolve, reject) => {
          window.setTimeout(() => { reject({'error': 400}) }, 1000);
        });
      }
    }
    // async/await
    async getBooksByAuthorWithAwait(authorId) {
    try {
      const books = await bookModel.fetchAll();
    } catch (error) {
      console.log(error);    // { "error": 400 }
    }

      在捕捉到異常之后,我們有幾種方法來處理它:

    • 處理異常,并返回一個正常值。(不在catch塊中使用任何return語句相當于使用return undefined,undefined也是一個正常值。)
    • 如果你想讓調用者來處理它,就將它拋出。你可以直接拋出錯誤對象,比如throw error,這樣就可以在promise鏈中使用await getBooksByAuthorWithAwait()函數(也就是像getBooksByAuthorWithAwait().then(...).catch(error => …)這樣調用它)。或者你可以將錯誤包裝成Error對象,比如throw new Error(error),那么在控制臺中顯示這個錯誤時它將給出完整的堆棧跟蹤信息。
    • 拒絕它,比如return Promise.reject(error)。這相當于throw error,因此不推薦使用。

      使用try…catch的好處是:

    • 簡單,傳統。只要你有其他語言(如Java或C++)的編程經驗,要理解這一點就不會有任何困難。
    • 如果沒有必要逐步進行錯誤處理,那么可以在單個try…catch塊中包裝多個await調用,這樣就可以在一個地方處理所有錯誤。

      這種方法也有一個缺陷。由于try...catch會捕獲代碼塊中的每個異常,所以通常不會被promise捕獲的異常也會被捕獲到。比如:

    class BookModel {
      fetchAll() {
        cb();    // note `cb` is undefined and will result an exception
        return fetch('/books');
      }
    }
    try {
      bookModel.fetchAll();
    } catch(error) {
      console.log(error);  // This will print "cb is not defined"
    }

      運行此代碼,你將會在控制臺看到“ReferenceError:cb is not defined”錯誤,消息的顏色是黑色的。錯誤消息是通過console.log()輸出的,而不是JavaScript本身。有時候這可能是致命的:如果BookModel被包含在一系列函數調用中,并且其中一個調用把錯誤吞噬掉了,那么找到這樣的undefined錯誤將非常困難。

     讓函數返回兩個值

      錯誤處理的另一種方式是受到了Go語言啟發,它允許異步函數返回錯誤和結果。

      簡單地說,我們可以像這樣使用異步函數:

    [err, user] = await to(UserModel.findById(1));

      我個人不喜歡這種方法,因為它將Go語言的風格帶入到了JavaScript中,感覺不自然。但在某些情況下,這可能相當有用。

      使用.catch

      我們要介紹的最后一種方法是繼續使用.catch()。

      回想一下await的功能:它將等待promise完成工作。另外,promise.catch()也會返回一個promise!所以我們可以這樣進行錯誤處理:

    // books === undefined if error happens,
    // since nothing returned in the catch statement
    let books = await bookModel.fetchAll()
      .catch((error) => { console.log(error); });

      這種方法有兩個小問題:

    • 它是promise和異步函數的混合體。你仍然需要了解promise的工作原理才能看懂這段代碼。
    • 錯誤處理出現在普通代碼邏輯之前,這樣不直觀。

     結論

      ES7引入的async/await關鍵字絕對是對JavaScript異步編程的重大改進。它讓代碼更易于閱讀和調試。然而,要正確使用它們,人們必須了解promise。它們不過是語法糖,本質上仍然是promise。

      英文原文:https://hackernoon.com/javascript-async-await-the-good-part-pitfalls-and-how-to-use-9b759ca21cda

    QQ群:WEB開發者官方群(515171538),驗證消息:10000
    微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
    提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
    es7
    網友評論(共0條評論) 正在載入評論......
    理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
    登錄會員中心
    大乐透彩票预测
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>