1. <em id="2qvri"><tr id="2qvri"></tr></em>
      1. 首頁»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條評論
        登錄會員中心
        江苏快3投注技巧