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

這篇文章帶大家了解一下JavaScript的非同步函數 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。

• Promise.any() 原理解析及使用指南
• #Promise.all() 原理解析及使用指南
• #Promise.race() 原理解析及使用指南
• Promise.allSettled() 原理解析及使用指南

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

總結

async/await 非常強大，但也有一些注意事項。但是如果正確使用它們，還是有助於使程式碼高效且高可讀。

【推薦學習：javascript高階教學】

#

以上是淺析JS的非同步函數async/await的詳細內容。更多資訊請關注PHP中文網其他相關文章！