JS の非同期関数 async/await の簡単な分析-jsチュートリアル-php.cn

JS の非同期関数 async/await の簡単な分析

青灯夜游

リリース： 2023-01-28 19:17:19

転載

2409 人が閲覧しました

この記事ではJavaScriptの非同期関数async/awaitについて紹介しますので、お役に立てれば幸いです。 ES7 で導入された

JS の非同期関数 async/await の簡単な分析

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

ログイン後にコピー

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

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

ログイン後にコピー