非同期、JavaScript で待機

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

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

非同期キーワード:

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

キーワード:

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

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

async/await の簡単な例:

それを壊しましょう:

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

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

(これらの機能の説明はここにあります)

これで、than() と catch() を使用してこれらの関数を呼び出すことができます。

このコードは、JavaScript の Promise チェーンの例です。ここでは、非同期操作 (データのフェッチなど) が順番に実行され、各ステップは前のステップの結果に依存します。

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

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

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

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

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

結果:

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

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

説明:
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 の利点:

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

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