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

以下もご興味があるかもしれません: