這篇文章帶大家了解一下JavaScript的非同步函數 async/await，希望對大家有幫助！
ES7 引入的async/await 是對JavaScript 非同步程式設計的一種改進，它提供了使用同步樣式程式碼非同步存取資源的選項，而不會阻塞主線程。但是，要很好地使用它有點棘手。在本文中，將從不同的角度探索 async/await，並展示如何正確有效地使用它們。
async/await 帶來的最重要的好處就是同步程式風格，先來看一個例子。
// async/await
const getArticlesByAuthorWithAwait = async (authorId) => {
const articles = await articleModel.fetchAll();
return articles.filter((b) => b.authorId === authorId);
};
// promise
const getArticlesByAuthorWithPromise = (authorId) => {
return articleModel
.fetchAll()
.then((articles) => articles.filter((b) => b.authorId === authorId));
};很明顯，async/await 版本比 promise 版本更容易理解。如果忽略 await 關鍵字，程式碼看起來就像任何其他同步語言，如 Python。
同時 async/await 有原生瀏覽器支持，截至目前，所有主流瀏覽器都已全面支援非同步功能。
要注意的是
async/await在使用的過程中需要成對出現，如在函數裡面要使用await，就必須將函數定義為async。
#有些文章將async/await 與Promise 進行比較，並聲稱它是JavaScript 非同步程式設計發展的下一代，這一點個人覺得有點誤導，個人認為async/await 是一種改進，一個語法糖，不會徹底改變程式風格。
本質上，非同步函數仍然是 promises，在正確使用非同步函數之前，必須先了解 promises。
儘管await 可以讓程式碼看起來像同步的，但請記住它們仍然是非同步的，必須注意避免過於順序化。
const getArticlesAndAuthor = async (authorId) => {
const articles = await articleModel.fetchAll();
const author = await authorModel.fetch(authorId);
return {
author,
articles: articles.filter((article) => article.authorId === authorId),
};
};這段程式碼在邏輯上看起來是正確的，然而這是回產生誤解。
await articleModel.fetchAll() 將等到 fetchAll() 返回。
然後 await authorModel.fetch(authorId) 將會立即被呼叫。
使用promise，非同步函數有兩個可能的回傳值：resolve 和reject，以用於正常情況使用.then() 和異常情況使用.catch()。然而，async/await 錯誤處理就不太好，需要使用 try...catch 來捕捉例外。
const getArticlesByAuthorWithAwait = async (authorId) => {
try {
const articles = await articleModel.fetchAll();
return articles.filter((b) => b.authorId === authorId);
} catch (error) {
// 错误处理
}
};async/await 非常強大，但也有一些注意事項。但是如果正確使用它們，還是有助於使程式碼高效且高可讀。
【推薦學習：javascript高階教學】
#以上是淺析JS的非同步函數async/await的詳細內容。更多資訊請關注PHP中文網其他相關文章！
