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),
    };
};

このコードは論理的には正しいように見えますが、誤解を招きます。

• awaitarticleModel.fetchAll() は、fetchAll() が返されるまで待機します。

• その後、 await authorModel.fetch(authorId) がすぐに呼び出されます。

エラー処理

promise を使用すると、非同期関数には 2 つの可能な戻り値があります: 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 中国語 Web サイトの他の関連記事を参照してください。