1. はじめにasync 関数 (async/await とも呼ばれる) は、ES2017 (ES8) で導入された新しい機能です。その主な目的は、Promise ベースの API を使用するときに必要な構文を簡素化することです。 2. 詳しい説明 async は関数内に非同期操作があることを意味し、await はそれに続く式が結果を待つ必要があることを意味します。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Linux sar コマンドの使用方法とコード例の分析
1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...
目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...
目次1. MySQLの主キーとテーブルフィールドに関するコメント1. 主キーと自動増分2. テーブル...
1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...
ブロック要素p - 段落テキストの事前フォーマットテーブルol - ソートフォームul - 順序なし...
概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
私はtengineを使用しています。インストールディレクトリは/usr/local/tengineで...
背景MySQL のデッドロックについて言えば、私は以前 MySQL のロックに関する基本的な紹介記事...
目次1. reduxとreactの関係2. Reactのマルチコンポーネント共有3. reduxの3...
1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...
少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...
ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...
コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...
みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...
この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...