JavaScript の async と await のシンプルで詳細な学習

JavaScript の async と await のシンプルで詳細な学習

1. はじめに

async 関数 (async/await とも呼ばれる) は、ES2017 (ES8) で導入された新しい機能です。その主な目的は、Promise ベースの API を使用するときに必要な構文を簡素化することです。 asyncおよびawaitキーワードを使用すると、意図的に Promise 呼び出しを連鎖させることなく、Promise ベースの非同期動作をより簡潔に記述できます。

2. 詳しい説明

​ async は関数内に非同期操作があることを意味し、await はそれに続く式が結果を待つ必要があることを意味します。 awaitキーワードは async 関数内でのみ有効であることに注意してください。 async 関数本体の外部で使用すると、構文エラーがスローされます。

2.1、非同期

async 関数は Promise オブジェクトを返すので、then メソッドを使用してコールバック関数を追加できます。 async が使用されている限り、関数が Promise オブジェクトを返すかどうかに関係なく、Promise オブジェクトにラップされます。

では、早速コードを見て効果を確認してみましょう。

2.1.1. 関数はPromise以外のオブジェクトを返す

非同期関数testAsync() {
    「hello async」を返します。
}

const 結果 = testAsync();
console.log(結果); 

関数が文字列を直接返す場合、Promise オブジェクトを返すことがわかります。これは、Promise.resolve() を介して文字列を Promise オブジェクトに直接カプセル化するのと同じです。関数が値を返さない場合、PromiseResult の結果は未定義になります。

2.1.2. 関数はPromiseオブジェクトを返す

	非同期関数testAsync() {
		新しいPromise(function(resolve,reject)を返す{
			(真)の場合{
				解決('解決を返す')
			} それ以外 {
				拒否('拒否戻り')
			}
		})
	}
	コンソールにログ出力します。 

返されるオブジェクトも Promise オブジェクトであることがわかります。

2.2、待つ

await キーワードの後に​​は任意の変数または式が続きますが、通常は await の後には非同期プロセスが続きます。 await を使用すると、後続のコード実行がブロックされます。とりあえず async は脇に置いて、 await についてだけ話しましょう。

​ await は async でマークされた関数でのみ使用できるため、効果を確認するにはブラウザ コンソールで次の例を実行してください。

関数testAsync() {
	新しいPromise(function(resolve,reject)を返す{
		setTimeout(関数() {
			(真)の場合{
				console.log('リクエスト中...')
				解決('解決を返す')
			} それ以外 {
				拒否('拒否戻り')
			}
		}, 2000)
	})
}
var 結果 = await testAsync();
var result1 = await "testAsync の後に実行";
console.log(結果);
コンソールログ(結果1); 

await を使用した後、testAsync メソッドが実行されるまで後続のコードは実行されないことがわかります。また、testAsync の前の async を削除して、await を追加したときの違いを確認することもできます。

2.3. asyncとawaitの組み合わせ

​ 上記では、await が後続のコード実行をブロックすることがわかっていますが、この問題をどのように解決すればよいでしょうか? async を使用する必要があります。async を使用した後、関数が実行されると、await に遭遇すると、最初に Promise オブジェクトが返されます。await 後の操作が完了すると、async 関数本体のステートメントが実行されます。

まず文法:

 非同期関数 関数名() {
 	XXXを待ちます。
 }

上記のサンプルコード:

関数testAsync() {
	新しいPromise(function(resolve,reject)を返す{
		setTimeout(関数() {
			(真)の場合{
				console.log('リクエスト中...')
				解決('解決を返す')
			} それ以外 {
				拒否('拒否戻り')
			}
		}, 2000)
	})
}

関数testAsync2() {
	新しいPromise(function(resolve,reject)を返す{
		setTimeout(関数() {
			(真)の場合{
				console.log('2をリクエストしています...')
				解決('resolve return2')
			} それ以外 {
				拒否('拒否 return2')
			}
		}, 2000)
	})
}

非同期関数テスト(){
	console.log('テストが開始されました...');
	var value1 = testAsync() を待機します。
	コンソールログ(値1);
	var value2 = testAsync2() を待機します。
	コンソールログ(値2);
	var value3 = await 'テストが終了します...';
	コンソールログ(値3);
}

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

​ 上図からわかるように、最初の await に遭遇した後、すぐに Promise オブジェクトが返され、その後 testAsync 関数が順に実行され、testAsync 関数の実行後に testAsync2 関数が実行されます。また、非同期関数によって Promise の構文が簡素化されることもわかります。以前は、コールバックを処理するために .then を使用する必要がありました。現在は、同期コードを書くのと同じように、await を使用して非同期コードを記述できます。

これをアップグレードし、上記に基づいてさらに 2 つの一般的な機能を追加してみましょう。

関数fun1() {
	'関数1'を返す

}

関数fun2() {
	'関数2'を返す
}

関数fun3() {
	コンソールにログ出力します。
	console.log(test()); // async/await 関数 console.log(fun2());
}

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

まずは関数の実行プロセスを整理してみましょう。

1. 最初に関数1を実行する

2. テスト機能を入力して出力開始

3. テスト関数でawaitに遭遇したら、すぐにPromiseオブジェクトを返す

4. 機能2を実行する

5. テスト関数でtestAsyncメソッドを実行する

6. テスト関数のtestAsyncメソッドが実行された後、testAsync2メソッドの実行を続けます。

7. テスト機能の終了

async 関数は await に遭遇するとすぐに Promise オブジェクトを返し、async 関数の外で後続のロジックを実行し続けていることがわかります。async 関数は await によってブロックされ、コード ロジックを順番に実行します。

2.4. async および await 例外処理

await の後の関数には例外が発生する可能性があるため、await コマンドを try...catch コード ブロック内に配置するのが最適です。 await が Promise オブジェクトである場合は、.catch を使用してそれをキャプチャすることもできます。

 // 非同期関数 myFunction() を書く最初の方法 {
   試す {
     何かを待機します();
   } キャッチ (エラー) {
     コンソールログ(エラー);
   }
 }
 
 // 2番目の書き方 async function myFunction() {
   何かを待つPromise()
   .catch(関数(エラー) {
     コンソールログ(エラー);
   });
 }

3. まとめ

​ async 関数は await に遭遇すると、すぐに Promise オブジェクトを返し、async 関数の外部ロジックの実行を継続します。async 関数は await によってブロックされ、コード ロジックを順番に実行します。

非同期関数で例外を処理するには、try...catch または .catch を使用できます。

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

以下もご興味があるかもしれません:
  • JavaScript PromiseとAsync/Awaitの詳細な説明
  • async/await と promise (Node.js における非同期操作の問題)
  • JavaScriptのPromiseを徹底的に理解する
  • Javascript の async 関数の詳細な説明
  • Javascript における promise、async、await の違いの詳細な説明

<<:  MySQL でよく使われる連結文のまとめ

>>:  Linux sar コマンドの使用方法とコード例の分析

推薦する

MySQL と接続関連のタイムアウトの詳細な概要

MySQL と接続関連のタイムアウト序文:今日、同僚から、データ量が多いときに MySQL データベ...

React のネストされたコンポーネントの構築順序

目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

花火効果を実現するJavaScript(オブジェクト指向)

この記事では、花火効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...

Linux で特定のプログラムを見つけるための whereis の例の詳細な説明

Linuxは特定のプログラムを見つけますwhereis コマンドは主にプログラム ファイルを検索し、...

Zabbixで電子メールアラートを実装する方法

オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

入力タグの名前と値の違い

type はブラウザでの入力と出力に使用されるコントロールです (たとえば、type="t...

MIME TYPEとは?MIME-Typesタイプコレクション

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

HTML 挿入画像の例 (HTML 追加画像)

HTML に画像を挿入するには、画像を表示するための HTML タグが必要です。これは、img タ...