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

　async/await的好處

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

// 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關(guān)鍵字，代碼看起來與其他任意一門同步語言一樣（如Python）。

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

??

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

??

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

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

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

　async/await可能會引起誤解

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

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

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

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

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

　async/await的陷阱

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

　　太過串行化

　　雖然await可以讓你的代碼看起來像是同步的，但請記住，它們?nèi)匀皇钱惒降�，要避免太過串行化。

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)將被調(diào)用。

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

　　正確的方法應(yīng)該是：

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寫出同步的代碼。在復(fù)雜的流程中，直接使用promise可能更方便。

　錯誤處理

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

　　try…catch

　　最標(biāo)準(zhǔn)的（也是我推薦的）方法是使用try…catch語句。在調(diào)用await函數(shù)時，如果出現(xiàn)非正常狀況就會跑出異常。比如：

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語句相當(dāng)于使用return undefined，undefined也是一個正常值。）
• 如果你想讓調(diào)用者來處理它，就將它拋出。你可以直接拋出錯誤對象，比如throw error，這樣就可以在promise鏈中使用await getBooksByAuthorWithAwait()函數(shù)（也就是像getBooksByAuthorWithAwait().then(...).catch(error => …)這樣調(diào)用它）�；蛘吣憧梢詫㈠e誤包裝成Error對象，比如throw new Error(error)，那么在控制臺中顯示這個錯誤時它將給出完整的堆棧跟蹤信息。
• 拒絕它，比如return Promise.reject(error)。這相當(dāng)于throw error，因此不推薦使用。

　　使用try…catch的好處是：

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

　　這種方法也有一個缺陷。由于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"
}

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

　讓函數(shù)返回兩個值

　　錯誤處理的另一種方式是受到了Go語言啟發(fā)，它允許異步函數(shù)返回錯誤和結(jié)果。

　　簡單地說，我們可以像這樣使用異步函數(shù)：

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

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

　　使用.catch

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

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

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

　　這種方法有兩個小問題：

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

　結(jié)論

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

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

標(biāo)簽： 安全 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。