JavaScript における Async/Await を理解する: 出力タイミングの詳細

タイミングにおける JavaScript の非同期/待機動作の明確化

最新の JavaScript 開発では、 非同期/待機 は非同期コードを処理するために不可欠なツールとなっています。その有用性にもかかわらず、多くの開発者は、これらの手法を利用して関数の出力の正確なタイミングを予測する際に混乱に遭遇します。これは、非同期操作のフローを理解することが重要である Adaface のようなコーディング評価に特に当てはまります。

あなたが取り組んでいる問題では、一見同様の動作をする 2 つの非同期関数が示されていますが、タイミングの点で結果が異なります。一見すると、どちらの関数も 10 秒かかるように見えますが、Promise がどのように解決されるかをより深く理解する必要があるため、実際の答えは多くの開発者を驚かせます。

この記事の目的は、コードを段階的に説明し、どのように機能するかを説明することです。 非同期 そして 待つ メカニズムの仕組みや、Promise 解決の順序が最終結果にどのように影響するかについても説明します。これを終えると、非同期 JavaScript でタイミングがどのように機能するかをより明確に理解できるようになります。

最初の関数が出力する理由を理解するために、コードを詳しく見てみましょう。 24 5 秒後、2 番目の関数も出力します。 24 ただし、約束の構造が異なります。この知識があれば、今後の面接評価に向けてより適切な準備が整います。

JavaScript での非同期操作の探索

提供されたスクリプトは、 非同期 そして 待つ キーワード。主なアイデアは、遅延操作などの非同期タスクを効率的に処理することです。どちらの例でも、関数は アフター5秒(x) 値で解決される Promise を返すことで、5 秒の遅延をシミュレートします。 ×。この遅延は、一連の操作と、Promise が関数のフローとどのように相互作用するかを理解するために不可欠です。

最初の関数では、 マルチ(入力)、コードは 2 つの Promise が解決されるまで順番に待機します。の 待つ キーワードにより、Promise が返されるまでコードの実行が一時停止されます。 アフター5秒(3) 解決されます。次に、最初の Promise が解決された後、コードは 2 番目の Promise までさらに 5 秒待機します。 アフター5秒(4) 解決するために。この結果、計算が行われるまでに合計 10 秒の待機時間がかかります。入力と両方の解決された値を乗算すると、最終的な出力が得られます。

2番目の機能は、 Second_mult(入力)、両方の Promise を同時に開始することでパフォーマンスが向上します。割り当てることで アフター5秒(3) そして アフター5秒(4) 適用する前に変数に 待つ、両方の Promise が並行して実行されます。コードが到達すると、 待つ ステートメントを実行すると、両方の Promise が解決されるまで待機しますが、それらはすでに進行中であるため、合計待機時間はわずか 5 秒に短縮されます。この同時実行は、非同期操作の最適化の重要性を浮き彫りにします。

これらのスクリプトは、async と await を使用して非同期コードを適切に処理する方法を示しています。非同期タスクをいつ同時実行または順次実行するかを理解することは、パフォーマンスを最適化するために重要です。の セカンドマルチルト 関数のアプローチは不必要な遅延を回避するという利点を示していますが、最初の例は操作を特定の順序で実行する必要がある場合に役立ちます。どちらの例も、現実世界のシナリオに広く適用できます。 プロミスの処理 API からデータを取得したり、外部リソースに依存する操作を実行したりする必要があります。

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// First approach using async/await with sequential waits
async function mult(input) {
  const f = await after5s(3);
  const g = await after5s(4);
  return input * f * g;
}

// Calling the function and handling the promise resolution
mult(2).then(value => {
  console.log(value); // Output: 24 after 10 seconds
});

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// Second approach optimizing by starting both promises concurrently
async function second_mult(input) {
  const f = after5s(3); // Starts promise immediately
  const g = after5s(4); // Starts second promise concurrently
  return input * await f * await g;
}

// Calling the function and handling the promise resolution
second_mult(2).then(value => {
  console.log(value); // Output: 24 after 5 seconds
});

JavaScript での非同期パターンをマスターする

最新の JavaScript で最も重要な概念の 1 つは、非同期タスクを効率的に処理する方法です。一方、 非同期/待機 構文は非同期コードの読みやすさを簡素化しますが、開発者が考慮しなければならない要素は他にもあります。非同期関数を使用する際の重要な側面は、JavaScript がどのように非同期関数を管理するかを理解することです。 イベントループ そして非同期コールスタック。イベント ループを使用すると、Promise などの非ブロック タスクをキューにプッシュし、他のコードの実行を継続することにより、シングル スレッド環境であっても JavaScript で複数のタスクを同時に実行できます。

非同期操作で見落とされがちな要素はエラー処理です。 async/await 構文を使用すると、開発者はコードを 試してみて...捕まえてください ブロックして、Promise の拒否やその他のエラーを適切に管理します。この方法により、プログラムのフローを中断することなく、非同期操作で発生するエラーが確実に捕捉され、処理されます。非同期関数はパフォーマンスを向上させるだけでなく、複雑なエラー処理をより効率的にし、デバッグを容易にします。

もう 1 つの重要な焦点領域は、次のとおりです。 Promise.all 複数の Promise を同時に処理するために使用できます。最初の例のように Promise を順番に待つのとは異なり、 Promise.all すべての Promise を同時に実行し、結果を配列で返します。このメソッドは、複数の API 呼び出しを行う場合、または実行順序が重要ではない複数のタスクを実行する場合に非常に役立ちます。最適でスケーラブルな JavaScript コードを作成するには、同時タスクを適切に構成する方法を理解することが重要です。