這篇“JS的異步函數(shù)async/await怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JS的異步函數(shù)async/await怎么使用”文章吧。

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

ES7 引入的 async/await 是對(duì) JavaScript 異步編程的一種改進(jìn)，它提供了使用同步樣式代碼異步訪問(wèn)資源的選項(xiàng)，而不會(huì)阻塞主線程。但是，要很好地使用它有點(diǎn)棘手。在本文中，將從不同的角度探索 async/await，并展示如何正確有效地使用它們。

async/await 好處

async/await 帶來(lái)的最重要的好處就是同步編程風(fēng)格，先來(lái)看一個(gè)例子。

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

同時(shí) async/await 有原生瀏覽器支持，截至目前，所有主流瀏覽器都已全面支持異步功能。

需要注意的是 async/await 在使用的過(guò)程中需要成對(duì)出現(xiàn)，如在函數(shù)里面要使用 await ，就必須將函數(shù)定義為 async 。

async/await 可能會(huì)產(chǎn)生誤導(dǎo)

有些文章將 async/await 與 Promise 進(jìn)行比較，并聲稱(chēng)它是 JavaScript 異步編程發(fā)展的下一代，這一點(diǎn)個(gè)人覺(jué)得有點(diǎn)誤導(dǎo)，個(gè)人認(rèn)為 async/await 是一種改進(jìn)，一個(gè)語(yǔ)法糖，不會(huì)徹底改變編程風(fēng)格。

本質(zhì)上，異步函數(shù)仍然是 promises，在正確使用異步函數(shù)之前，必須了解 promises。

• Promise.any() 原理解析及使用指南

• Promise.all() 原理解析及使用指南

• Promise.race() 原理解析及使用指南

• Promise.allSettled() 原理解析及使用指南

async/await 陷阱

盡管 await 可以使代碼看起來(lái)像同步的，但請(qǐng)記住它們?nèi)匀皇钱惒降模仨氉⒁獗苊膺^(guò)于順序化。

const getArticlesAndAuthor = async (authorId) => {
    const articles = await articleModel.fetchAll();
    const author = await authorModel.fetch(authorId);
    return {
        author,
        articles: articles.filter((article) => article.authorId === authorId),
    };
};

這段代碼在邏輯上看起來(lái)是正確的，然而這是回產(chǎn)生誤解。

• await articleModel.fetchAll() 將等到 fetchAll() 返回。

• 然后 await authorModel.fetch(authorId) 將會(huì)被立即調(diào)用。

錯(cuò)誤處理

使用 promise，異步函數(shù)有兩個(gè)可能的返回值：resolve 和 reject，以用于正常情況使用 .then() 和異常情況使用.catch()。然而，async/await 錯(cuò)誤處理就不太好，需要使用 try...catch 來(lái)捕獲異常。

const getArticlesByAuthorWithAwait = async (authorId) => {
    try {
        const articles = await articleModel.fetchAll();
        return articles.filter((b) => b.authorId === authorId);
    } catch (error) {
        // 錯(cuò)誤處理
    }
};

以上就是關(guān)于“JS的異步函數(shù)async/await怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。