淺析JS的非同步函數async/await-js教程-PHP中文網

這篇文章帶大家了解一下JavaScript的非同步函數 async/await，希望對大家有幫助！

淺析JS的非同步函數async/await

ES7 引入的async/await是對JavaScript 非同步程式設計的一種改進，它提供了使用同步樣式程式碼非同步存取資源的選項，而不會阻塞主線程。但是，要很好地使用它有點棘手。在本文中，將從不同的角度探索async/await，並展示如何正確有效地使用它們。

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 可能會產生誤導

#有些文章將async/await與Promise進行比較，並聲稱它是JavaScript 非同步程式設計發展的下一代，這一點個人覺得有點誤導，個人認為async/await是一種改進，一個語法糖，不會徹底改變程式風格。

本質上，非同步函數仍然是promises，在正確使用非同步函數之前，必須先了解promises。

async/await 陷阱

儘管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) { // 错误处理 } };

登入後複製