JavaScript における async と await の使い方とメソッド

JS の async 関数と await キーワード

関数ヘルワールド() {

    「こんにちは！美しい世界！」を返します。

}

console.log(hellworld()); // こんにちは!美しい世界！

非同期関数 asyHellworld() {

    「こんにちは！美しい世界！」を返します。

}

console.log(asyHellworld()); // Promise { 'Hello!美しい世界！ '}

通常の関数 hellworld は、単に文字列 hello! を返します。美しい世界！ 、 async 関数は Promise オブジェクトを返します。

非同期関数によって返された値を使用する必要がある場合は、次のように、その後に .then() ブロックを追加する必要があります。

非同期関数 asyHellworld() {

    「こんにちは！美しい世界！」を返します。

}

asyHellworld().then((str) => console.log(str)); // こんにちは!美しい世界！

await キーワードは、値を待機する必要がある可能性のある他のコードの実行を続行する前に、非同期関数の Promise が完了して結果を返すことを保証します。

非同期関数 asyHellworld() {

    return await Promise.resolve("Hello! Beautiful world!");

}

asyHellworld().then(console.log); // こんにちは!美しい世界！

このコードはシンプルですが、await キーワードの使用方法と、関数本体内で Promise オブジェクトをどのように操作するかを示しています。

次に、コードを理解しやすくするために、次のようにコード内の Promise 構文を削除します。

非同期関数 asyHellworld() {

    「こんにちは！美しい世界！」を返します。

}

非同期関数printHello() {

    const strHello = asyHellworld() を待機します。

    コンソールにログ出力します。

}

こんにちは、印刷します。

上記のコードでは、async と await の使用をより直感的に確認できます。通常、 async と await は非同期操作を処理するために使用され、非同期を同期に変える方法です。

async はこの非同期関数を表す関数を宣言し、await は関数内の非同期操作が完了するまで待機するために使用されます。

上記の紹介を通じて、async と await について予備的な理解が得られました。では、これらは何に使用できるのでしょうか?

await キーワードは、値を待機する必要がある可能性のある他のコードの実行を続行する前に、非同期関数の Promise が完了して結果を返すことを保証します。

したがって、VUE プロジェクトなどで AJAX 非同期リクエストを処理する場合、通常の処理方法は次のとおりです。

login(ユーザー名, パスワード).then((loginResult) => {

    // ログイン要求が送信された後の要求の処理 console.log("ログイン成功!");

});

await の使用は次のように処理できます。

const loginResult = await login(ユーザー名、パスワード);

console.log(ログイン結果);

ここで注意すべき点は、await は非同期関数でのみ使用できることです。上記のコードには問題があります。ストアで処理する場合は、次のように変更する必要があります。

定数アクション = {

    非同期 [LOGIN]({ コミット }, ペイロード) {

        const { ユーザー名、パスワード } = ペイロード;

        const loginResult = await login(ユーザー名、パスワード);

        console.log(ログイン結果);

    },

};

ここでは、複数の Promise で構成される then チェーンを処理するときに利点が反映されることがわかります。

もう 1 つの一般的な使用法は、プログラムを一時停止することです。これは sleep メソッドです。実装コードは次のとおりです。

定数スリープ = (ミリ秒) => {
    新しい Promise を返します((resolve) => setTimeout(resolve, ms));
};

(非同期() => {
    console.log("実行を開始し、10秒間helloを出力します");
    スリープを待機します(10 * 1000);
    console.log("こんにちは");
})();

JavaScript における async と await の使用法と方法についてはこれで終わりです。より関連性の高い Js async と await のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。