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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS ループで async と await を正しく使用する方法
  • JS で async await をエレガントに使用する方法
  • JavaScript のよりエレガントなエラー処理方法 async await
  • JavaScript の async と await のシンプルで詳細な学習
  • JavaScript PromiseとAsync/Awaitの詳細な説明
  • JS で async と await を使用する方法

<<:  MySQL 時間差関数 (TIMESTAMPDIFF、DATEDIFF)、日付変換計算関数 (date_add、day、date_format、str_to_date)

>>:  bash のスクリプトデバッグメカニズムの詳細な説明

推薦する

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...

MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する

序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

Centos7 での python3 のインストールとアンインストールに関するチュートリアル

1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...

CSS ラベルモード表示プロパティの詳細な説明

コードは次のようになります。 <!DOCTYPE html> <html> ...

Harborを使用してプライベートDockerリポジトリを構築する方法

目次1. オープンソースの倉庫管理ツール Harbor 2 インストール2.1 DockerとDoc...

Centos 6.9 に MySQL をインストールするための詳細なチュートリアル

1. MySQLがインストールされているかどうかを確認します。次のコードで確認できます。 [root...

MySQL チュートリアル: サブクエリの例の詳細な説明

目次1. サブクエリとは何ですか? 2. サブクエリはどこに表示されますか? 3. Whereサブク...

MySQLのMVCCマルチバージョン同時実行制御の実装

1 MVCCとは何かMVCC の正式名称は、マルチバージョン同時実行制御です。データベースへの同時ア...

ウェブサイトのビジュアルデザインの重要なポイント

手工芸デザインからグラフィックデザイン、そしてウェブデザインまで、デザインの原則は同じままですが、私...

ファイルアップロードスタイルの詳細を実装するjs

目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...

MySQLの左結合と内部結合について簡単に説明します

序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する 'axios' から axios をインポートします。...

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...