JavaScript中async/await怎么用-創(chuàng)新互聯(lián)

這篇文章主要介紹了JavaScript中async/await怎么用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),柴桑企業(yè)網(wǎng)站建設(shè),柴桑品牌網(wǎng)站建設(shè),網(wǎng)站定制,柴桑網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,柴桑網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

ES8 引入的async/await 在 JavaScript 的異步編程中是一個好的改進。它提供了使用同步樣式代碼異步訪問resoruces 的方式，而不會阻塞主線程。然而，它們也存在一些坑及問題。在本文中，將從不同的角度探討async/await，并演示如何正確有效地使用這對兄弟。

前置知識

async 作用是什么

從 MDN 可以看出：

async 函數(shù)返回的是一個Promise 對象。async 函數(shù)（包含函數(shù)語句、函數(shù)表達式、Lambda表達式）會返回一個Promise 對象，如果在函數(shù)中return 一個直接量，async 會把這個直接量通過Promise.resolve() 封裝成Promise 對象。

如果async 函數(shù)沒有返回值，它會返回Promise.resolve(undefined)。

await 作用是什么

從 MDN 了解到：

await 等待的是一個表達式，這個表達式的計算結(jié)果是Promise 對象或者其它值（換句話說，await 可以等任意表達式的結(jié)果）。

如果它等到的不是一個 Promise 對象，那 await 表達式的運算結(jié)果就是它等到的東西。

如果它等到的是一個 Promise 對象，await 就忙起來了，它會阻塞后面的代碼，等著 Promise 對象 resolve，然后得到 resolve 的值，作為 await 表達式的運算結(jié)果。

這就是 await 必須用在 async 函數(shù)中的原因。async 函數(shù)調(diào)用不會造成阻塞，它內(nèi)部所有的阻塞都被封裝在一個 Promise 對象中異步執(zhí)行。

async/await 的優(yōu)點

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 關(guān)鍵字，代碼看起來就像任何其他同步語言，比如Python。

很好的地方不僅在于可讀性。async/await 到今天為止，所有主流瀏覽器都完全支持異步功能。

JavaScript中async/await怎么用

本地瀏覽器的支持意味著你不必轉(zhuǎn)換代碼。更重要的是，它便于調(diào)試。當在函數(shù)入口點設(shè)置斷點并跨過await 行時，將看到調(diào)試器在bookModel.fetchAll() 執(zhí)行其任務(wù)時暫停片刻，然后它將移動到下一個.filter 行,這比promise 代碼要簡單得多，在promise 中，必須在.filter 行上設(shè)置另一個斷點。

JavaScript中async/await怎么用

另一個不太明顯的優(yōu)點是async 關(guān)鍵字。async聲明getBooksByAuthorWithAwait()函數(shù)返回值確保是一個promise，因此調(diào)用者可以安全地使用getBooksByAuthorWithAwait().then(...) 或awaitgetBooksByAuthorWithAwait()。想想下面的例子（不好的做法！）：

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 可能會產(chǎn)生誤導

一些文章將async/wait 與Promise 進行了比較，并聲稱它是 JavaScript 下一代異步編程風格，對此作者深表異議。async/await 是一種改進，但它只不過是一種語法糖，不會完全改變我們的編程風格。

從本質(zhì)上說，async 函數(shù)仍然是promise。在正確使用async 函數(shù)之前，你必須先了解 promise，更糟糕的是，大多數(shù)時候你需要在使用promises 的同時使用async 函數(shù)。

考慮上面示例中的getBooksByAuthorWithAwait() 和getbooksbyauthorwithpromise() 函數(shù)。請注意，它們不僅功能相同，而且具有完全相同的接口!

這意味著getbooksbyauthorwithwait() 將返回一個promise，所以也可以使用.then(...)方式來調(diào)用它。

嗯，這未必是件壞事。只有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),
  };
}

上述代碼在邏輯上看似正確的，然而，這是錯誤的。

await bookModel.fetchAll() 會等待fetchAll() 直到fetchAll() 返回結(jié)果。
然后await authorModel.fetch(authorId) 被調(diào)用。

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

下面是正確的方式：

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),
  };
}

更糟糕的是，如果你想要一個接一個地獲取項目列表，你必須依賴使用　promises:

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中，異步函數(shù)有兩個可能的返回值:resolved 和rejected。我們可以用.then() 處理正常情況，用.catch() 處理異常情況。然而，使用async/await方式的，錯誤處理可能比較棘手。

try…catch

最標準的(也是作者推薦的)方法是使用try...catch 語法。在await 調(diào)用時，在調(diào)用await 函數(shù)時，如果出現(xiàn)非正常狀況就會拋出異常,await 命令后面的promise 對象，運行結(jié)果可能是rejected，所以好把await 命令放在try...catch 代碼塊中。如下例子:

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 也是一個正常值。)
如果你想讓調(diào)用者處理它，你可以直接拋出普通的錯誤對象，如throw errorr，它允許你在promise 鏈中使用async getBooksByAuthorWithAwait() 函數(shù)(也就是說，可以像getBooksByAuthorWithAwait().then(...).catch(error => ...) 處理錯誤); 或者可以用Error 對象將錯誤封裝起來，如throw new Error(error)，當這個錯誤在控制臺中顯示時，它將給出完整的堆棧跟蹤信息。
拒絕它，就像return Promise.reject(error) ，這相當于throw error，所以不建議這樣做。

使用try...catch 的好處：

簡單,傳統(tǒng)。只要有Java或c++等其他語言的經(jīng)驗，理解這一點就不會有任何困難。
如果不需要每步執(zhí)行錯誤處理，你仍然可以在一個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"
}

運行此代碼，你將得到一個錯誤 ReferenceError: cb is not defined。這個錯誤是由console.log()打印出來的的，而不是 JavaScript 本身。有時這可能是致命的:如果BookModel 被包含在一系列函數(shù)調(diào)用中，其中一個調(diào)用者吞噬了錯誤，那么就很難找到這樣一個未定義的錯誤。

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

另一種錯誤處理方法是受到Go語言的啟發(fā)。它允許異步函數(shù)返回錯誤和結(jié)果。詳情請看這篇博客文章:

How to write async await without try-catch blocks in Javascript

簡而言之，你可以像這樣使用異步函數(shù):

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

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

使用 .catch

這里介紹的最后一種方法就是繼續(xù)使用.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); });

這種方法有兩個小問題:

它是 promises 和 async 函數(shù)的混合體。你仍然需要理解是promises 如何工作的。
錯誤處理先于正常路徑，這是不直觀的。

結(jié)論

ES7引入的 async/await 關(guān)鍵字無疑是對J avaScrip t異步編程的改進。它可以使代碼更容易閱讀和調(diào)試。然而，為了正確地使用它們，必須完全理解promise，因為async/await 只不過是promise 的語法糖，本質(zhì)上仍然是promise。

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript中async/await怎么用內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細的解決方法等著你來學習!

文章標題：JavaScript中async/await怎么用-創(chuàng)新互聯(lián)
當前地址：http://muchs.cn/article34/dcjjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站建設(shè)、網(wǎng)站制作、標簽優(yōu)化、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容