非同期、JavaScript で待機

Oct 27, 2024 am 03:48 AM

JavaScript の非同期では、await により、Promise を操作するための、より読みやすく「クリーンな」方法が提供されます。 (約束についてはここで読むことができます)。

まず構文を理解しましょう。

非同期キーワード:

async キーワードがあります。関数が非同期であると宣言すると、この関数が常に Promise を返すことがわかります。値を直接返した場合でも、JavaScript はそれを自動的に Promise でラップします。

キーワード:

まず、await キーワードを使用したい場合は、非同期関数内でのみ使用できることを知っておく必要があります。
この await キーワードは、Promise が解決されるか拒否されるまで、非同期関数の実行を一時停止します。

async/await の非常に単純な例を見てみましょう。その後、完全な Promise アプローチ (async/await なし) と async/await アプローチを比較する大きな例を使用します。

async/await の簡単な例:

Async, Await in Javascript

それを壊しましょう:

  1. response.ok: このプロパティは、応答の HTTP ステータス コードが成功の範囲 (200 ~ 299) 内にあるかどうかを確認します。
  2. response.json(): 応答が成功した場合、この関数はサーバーから返された JSON データを解析します。
  3. response.status: 404 (見つかりません) や 500 (サーバー エラー) などの正確なステータス コードが表示されます。

async/await の基本を理解したので、さらに深く掘り下げて、Promise を使用した別の例を見てみましょう。
3 つの関数があり、各関数は Promise を返します:

Async, Await in Javascript
(これらの機能の説明はここにあります)

これで、than() と catch() を使用してこれらの関数を呼び出すことができます。
Async, Await in Javascript
このコードは、JavaScript の Promise チェーンの例です。ここでは、非同期操作 (データのフェッチなど) が順番に実行され、各ステップは前のステップの結果に依存します。

  • getOrders(user.id) が解決されると、orders 配列が次の .then() 内のコールバック関数に渡されます。

  • 注文はコンソールに記録されます。

  • 次に、getOrderDetails(orders[1]) が呼び出され、orders 配列の 2 番目の注文が取得されます (存在すると仮定します)。

  • この関数は、注文の詳細が取得されたときに解決される promise を返します。

  • getOrderDetails() からの Promise が返されるため、次の .then() はこの Promise が解決されるまで待機します。

結果:

Async, Await in Javascript

非同期/待機アプローチ:

このコードは、Promise Chaining アプローチと比較して、JavaScript で async/await を使用して非同期操作をより読みやすく処理する方法の例です。

Async, Await in Javascript

説明:
1.async 関数 asyncAwaitExample():

  • この関数は非同期としてマークされています。つまり、常に非同期になります。 約束を返す。その中で await キーワードを使用できるようになります。
    • 関数内では、同期コードのように見え、動作する方法で非同期コードを記述することができ、可読性が向上します。
  1. try { ... } catch (error) { ... }:
  • try-catch ブロックはエラーを処理するために使用されます。非同期操作の実行中に発生したエラーはすべて catch ブロックで捕捉されます。
  1. const user = await getUser(1);:
  • await キーワードは、getUser(1) Promise が解決されるまで関数の実行を一時停止します。 - getUser Promise が解決されると、結果 (ユーザー オブジェクト) がユーザー変数に格納されます。 -Promise が拒否された場合 (つまり、エラーが発生した場合)、エラーを処理するために catch ブロックにジャンプします。 - const Order、const 詳細についても同様の操作

4.catch (エラー) { console.log("エラーは:", error); }:

  • 非同期関数 (getUser、getOrders、または getOrderDetails) のいずれかがエラーをスローするか、その Promise が拒否された場合、実行は catch ブロックにジャンプします。

結果:

Async, Await in Javascript

async/await の利点:

1.可読性: 非同期コードは同期コードのように見えるため、.then() ブロックをネストしたり、コールバック地獄に対処したりする必要性が減ります。
2.エラー処理: 単純な try-catch ブロックを使用すると、Promise で .catch() を使用するよりも簡単な方法でエラーを処理できます。
3.保守性: ロジックが複雑になるにつれて、Promise チェーンよりも async/await を使用した方が追跡と保守が容易になります。

Async, Await in Javascript

以上が非同期、JavaScript で待機の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles