這篇文章主要介紹了JavaScript中async/await怎么用，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為合肥企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)，合肥網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
ES8 引入的 async/await 在 JavaScript 的異步編程中是一個(gè)極好的改進(jìn)。它提供了使用同步樣式代碼異步訪問 resoruces 的方式，而不會(huì)阻塞主線程。然而，它們也存在一些坑及問題。在本文中，將從不同的角度探討 async/await，并演示如何正確有效地使用這對兄弟。
從 MDN 可以看出：
async 函數(shù)返回的是一個(gè) Promise對象。async函數(shù)（包含函數(shù)語句、函數(shù)表達(dá)式、Lambda表達(dá)式）會(huì)返回一個(gè) Promise對象，如果在函數(shù)中 return 一個(gè)直接量，async會(huì)把這個(gè)直接量通過 Promise.resolve() 封裝成 Promise對象。
如果 async函數(shù)沒有返回值， 它會(huì)返回 Promise.resolve(undefined)。
從 MDN 了解到：
await等待的是一個(gè)表達(dá)式，這個(gè)表達(dá)式的計(jì)算結(jié)果是 Promise對象或者其它值（換句話說，await可以等任意表達(dá)式的結(jié)果）。
如果它等到的不是一個(gè) Promise 對象，那 await 表達(dá)式的運(yùn)算結(jié)果就是它等到的東西。
如果它等到的是一個(gè) Promise 對象，await 就忙起來了，它會(huì)阻塞后面的代碼，等著 Promise 對象 resolve，然后得到 resolve 的值，作為 await 表達(dá)式的運(yùn)算結(jié)果。
這就是 await 必須用在 async 函數(shù)中的原因。async 函數(shù)調(diào)用不會(huì)造成阻塞，它內(nèi)部所有的阻塞都被封裝在一個(gè) Promise 對象中異步執(zhí)行。
async/await 帶給我們的最重要的好處是同步編程風(fēng)格。讓我們看一個(gè)例子：
重慶分公司
重慶分公司
// 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 到今天為止，所有主流瀏覽器都完全支持異步功能。
本地瀏覽器的支持意味著你不必轉(zhuǎn)換代碼。更重要的是，它便于調(diào)試。當(dāng)在函數(shù)入口點(diǎn)設(shè)置斷點(diǎn)并跨過 await 行時(shí)，將看到調(diào)試器在 bookModel.fetchAll() 執(zhí)行其任務(wù)時(shí)暫停片刻，然后它將移動(dòng)到下一個(gè).filter 行,這比 promise代碼要簡單得多，在 promise 中，必須在 .filter 行上設(shè)置另一個(gè)斷點(diǎn)。
另一個(gè)不太明顯的優(yōu)點(diǎn)是 async 關(guān)鍵字。 async聲明 getBooksByAuthorWithAwait()函數(shù)返回值確保是一個(gè) promise，因此調(diào)用者可以安全地使用 getBooksByAuthorWithAwait().then(...) 或await getBooksByAuthorWithAwait()。 想想下面的例子（不好的做法?。?/p>
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 聲明，這種情況就不會(huì)出現(xiàn)了。
一些文章將 async/wait與 Promise進(jìn)行了比較，并聲稱它是 JavaScript 下一代異步編程風(fēng)格，對此作者深表異議。async/await 是一種改進(jìn)，但它只不過是一種語法糖，不會(huì)完全改變我們的編程風(fēng)格。
從本質(zhì)上說，async函數(shù)仍然是 promise。在正確使用 async函數(shù)之前，你必須先了解 promise，更糟糕的是，大多數(shù)時(shí)候你需要在使用 promises的同時(shí)使用 async函數(shù)。
考慮上面示例中的 getBooksByAuthorWithAwait()和getbooksbyauthorwithpromise()函數(shù)。請注意，它們不僅功能相同，而且具有完全相同的接口!
這意味著 getbooksbyauthorwithwait()將返回一個(gè) promise，所以也可以使用 .then(...)方式來調(diào)用它。
嗯，這未必是件壞事。只有 await 的名字給人一種感覺，“哦，太好了，可以把異步函數(shù)轉(zhuǎn)換成同步函數(shù)了”，這實(shí)際上是錯(cuò)誤的。
那么在使用 async/await 時(shí)可能會(huì)犯什么錯(cuò)誤呢?下面是一些常見的例子。
盡管 await 可以使代碼看起來像是同步的，但實(shí)際它們?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),
};
}上述代碼在邏輯上看似正確的，然而，這是錯(cuò)誤的。
await bookModel.fetchAll() 會(huì)等待 fetchAll() 直到 fetchAll() 返回結(jié)果。await authorModel.fetch(authorId) 被調(diào)用。注意，authorModel.fetch(authorId) 并不依賴于 bookModel.fetchAll() 的結(jié)果，實(shí)際上它們可以并行調(diào)用！然而，用了 await，兩個(gè)調(diào)用變成串行的，總的執(zhí)行時(shí)間將比并行版本要長得多得多。
下面是正確的方式：
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),
};
}更糟糕的是，如果你想要一個(gè)接一個(gè)地獲取項(xiàng)目列表，你必須依賴使用 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 寫出同步的代碼。在復(fù)雜的流程中，直接使用 promise可能更方便。
在 promise中，異步函數(shù)有兩個(gè)可能的返回值: resolved 和 rejected。我們可以用 .then() 處理正常情況，用 .catch() 處理異常情況。然而，使用 async/await方式的，錯(cuò)誤處理可能比較棘手。
最標(biāo)準(zhǔn)的(也是作者推薦的)方法是使用 try...catch 語法。在 await 調(diào)用時(shí)，在調(diào)用 await 函數(shù)時(shí)，如果出現(xiàn)非正常狀況就會(huì)拋出異常,await命令后面的 promise對象，運(yùn)行結(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 語句相當(dāng)于使用 return undefined，undefined 也是一個(gè)正常值。)throw errorr，它允許你在 promise鏈中使用 async getBooksByAuthorWithAwait() 函數(shù)(也就是說，可以像getBooksByAuthorWithAwait().then(...).catch(error => ...) 處理錯(cuò)誤); 或者可以用 Error 對象將錯(cuò)誤封裝起來，如 throw new Error(error)，當(dāng)這個(gè)錯(cuò)誤在控制臺中顯示時(shí)，它將給出完整的堆棧跟蹤信息。return Promise.reject(error) ，這相當(dāng)于 throw error，所以不建議這樣做。使用 try...catch 的好處：
try ... catch 塊中包裝多個(gè) await 調(diào)用來處理一個(gè)地方的錯(cuò)誤。這種方法也有一個(gè)缺陷。由于 try...catch 會(huì)捕獲代碼塊中的每個(gè)異常，所以通常不會(huì)被 promise 捕獲的異常也會(huì)被捕獲到。比如：
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)行此代碼，你將得到一個(gè)錯(cuò)誤 ReferenceError: cb is not defined。這個(gè)錯(cuò)誤是由console.log()打印出來的的，而不是 JavaScript 本身。有時(shí)這可能是致命的:如果 BookModel被包含在一系列函數(shù)調(diào)用中，其中一個(gè)調(diào)用者吞噬了錯(cuò)誤，那么就很難找到這樣一個(gè)未定義的錯(cuò)誤。
另一種錯(cuò)誤處理方法是受到Go語言的啟發(fā)。它允許異步函數(shù)返回錯(cuò)誤和結(jié)果。詳情請看這篇博客文章:
How to write async await without try-catch blocks in Javascript
簡而言之，你可以像這樣使用異步函數(shù):
[err, user] = await to(UserModel.findById(1));
作者個(gè)人不喜歡這種方法，因?yàn)樗鼘?Go 語言的風(fēng)格帶入到了 JavaScript 中，感覺不自然。但在某些情況下，這可能相當(dāng)有用。
這里介紹的最后一種方法就是繼續(xù)使用 .catch()。
回想一下 await 的功能:它將等待 promise完成它的工作。值得注意的一點(diǎn)是 promise.catch() 也會(huì)返回一個(gè) promise，所以我們可以這樣處理錯(cuò)誤:
// books === undefined if error happens,
// since nothing returned in the catch statement
let books = await bookModel.fetchAll()
.catch((error) => { console.log(error); });這種方法有兩個(gè)小問題:
ES7引入的 async/await 關(guān)鍵字無疑是對J avaScrip t異步編程的改進(jìn)。它可以使代碼更容易閱讀和調(diào)試。然而，為了正確地使用它們，必須完全理解 promise，因?yàn)?async/await 只不過是 promise的語法糖，本質(zhì)上仍然是 promise。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享JavaScript中async/await怎么用內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!
