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 コマンドの使用方法とコード例の分析

推薦する

Vue で PC 解像度の適応を実装するためのサンプルコード

目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

Vueを使用して手書き署名機能を実装する

個人的な実装のスクリーンショット:インストール: npm インストール vue-esign --sa...

CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)

エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...

URLエスケープエンコーディングの特殊文字に基づいて

目次URL 内の特殊文字URL 特殊文字エスケープ、URL 内の一部の文字には特別な意味があり、基本...

Vue は左右のスライド効果のサンプルコードを実装します

序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人...

Java は Excel から MySQL にデータをインポートします

実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...

VMware仮想マシンの起動時に黒い画面が表示される問題を解決する

# VMware ハードディスクの起動優先順位を調整するステップ 1: 電源をオンにすると、BIOS...

Vue diffアルゴリズムの完全な分析

目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...

MySQL における IF()、IFNULL()、NULLIF()、および ISNULL() 関数の使用に関する詳細な説明

MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

WindowsにOpenSSLをインストールし、OpenSSLを使用して公開鍵と秘密鍵を生成します。

1. OpenSSL公式サイト公式ダウンロードアドレス: https://www.openssl....

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

JavaScriptプロトタイプチェーンを理解する

目次1. プロトタイプとプロトタイプチェーンの平等関係を理解する2: プロトタイプとプロトタイプ チ...