JavaScript の操作: 非同期 / 待機

JavaScriptの非同期プログラミングは初心者にとって挑戦かもしれませんが、この言語に習熟することは不可欠です。

比較的新しい開発者として、JavaScriptの文法は時々刺激的で、時には圧倒されます。しばらくの間、JavaScriptの一定期間の実際の理解の側面は、非同期コードを処理することです。 JavaScriptには、非同期コードを処理する単一の方法はありませんが、非同期コードを作成する一般的な方法を理解することは、開発における私の開発に重要であることを証明しています。

最も一般的な2つの方法は

またはasync/awaitです。各方法には独自の価値がありますが、ES2017での出現以来、より効率的な継承者と見なされることがよくあります。まず、SO -Called Pioneer then/catchを見てみましょう。 async/await then/catchそれから/キャッチ

歴史における

メソッドは、約束を処理するための標準的な方法です。以下は例です：

then/catch外部APIからデータを取得した後、

は完成した約束を処理するために使用され、

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

は非同期操作中に発生するエラーがあります。この方法は有効ですが、複数の非同期呼び出しが必要な場合に非常に厄介になる可能性があります。これは、各

がインデンテーションレベルと複雑さを増加させるためです。これにより、プログラムは非出席者にとっても混乱します！ .then() .catch()async/await.then() を使用して、非同期操作は同期的な方法で記述して、コードを読みやすくしやすくすることができます。これは例です：

キーワード（常に関数の開始前に配置されています）は、約束を返す関数を定義します。

キーワードは、停止する必要がある後に約束が完了するまで、関数の実行を一時停止します。このようにして、コードのプロセスは整然と見えます。

async/awaitこの方法では、ネストされた深いコールバックを避け、コードの読みやすさを改善することができます。ただし、エラーを完全に排除することはできません。適切な間違いに対処する必要があり、次のテーマにつながります。 async/await

試してください

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

in 、asyncブロックは、より明確なエラー処理方法を提供します。リンクなし呼び出し、意図をawaitブロックに詰めて、単一の

ブロックでエラーを処理できます。この方法は、関連するコードに密接に関連するエラー処理のロジックを保持します。これは、デバッグとメンテナンスが容易です。

async/awaitこれは

の例です。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

この構造により、すべてのエラーが統合され、コードが読み取り可能なままであることが保証されます。通常、特に同期プログラミングのパラダイムから移行する開発者にとって、より直感的であると考えられます。

追加：安全な割り当てオペレーター

Security Assignment Operator（）は、特にデフォルト値を処理する場合、JavaScriptコードの明確さを強化できる新しいツールです。このコンピューティングシンボルは、変数がnullまたは未定義の場合にのみ変数に割り当てられます。これは例です：

非同期操作のコンテキストでは、この運用シンボルは、処理が定義されていない場合、またはnullへの応答を払い戻し値を設定するのに役立ちます。 ??=

シンプルである方がいいですか？

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

JavaScriptを書くとき、シンプルさと読みやすさの間にはほぼ綱引きがあります。 メソッドは、コードが短くなることがありますが、

の読みやすさとメンテナンスにより、ほとんどのユースケースでより強力な選択になります。 を使用すると、単純な構造は非同期コードの均一なアップグレードです。

同じ原則は、

などのオペレーターにも適用できます。彼らはあなたのコードをより簡潔にすることができますが、これらの特性を過剰に使用すると、特に新しい開発者にとって、コードの意図が曖昧になる場合があります。 then/catch try/catchそれで、シンプルさは常に良いですか？多分そうではない！単純なコードはエレガントに見えますが、明確さは常に推奨されるはずです。 JavaScriptのスキルを磨き続けると、シンプルさと読みやすさのバランスをとることが重要です。そのため、コードは強力であるだけでなく、簡単にコラボレーションします。 async/await

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