<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»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條評論
              登錄會員中心
              云南十一选往期