ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript でスムーズな非同期プログラミングに「async」と「await」を使用する方法

JavaScript でスムーズな非同期プログラミングに「async」と「await」を使用する方法

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-19 22:38:29541ブラウズ

How to Use 'async' and 'await' for Smooth Asynchronous Programming in JavaScript?

'async' と 'await' を使用した JavaScript の非同期関数

非同期プログラミングは JavaScript のモデルにおいて重要です。非同期操作が終了すると、その後追加のコードが実行されるのが一般的です。以前は、この目的のためにコールバックが利用されていました。ただし、ネストされたコールバックは「コールバック地獄」につながる可能性があります。

Promises

Promise は、ネストされたコールバックに関連する問題を改善しました。これらにより、「プロミス チェーン」によるチェーンが可能になり、よりクリーンな構文とエラー処理が提供されます。例:

<code class="javascript">const randomProm = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('Succes');
  } else {
    reject('Failure');
  }
});

// Promise chain
randomProm
  .then((value) => {
    console.log('inside then1');
    console.log(value);
    return value;
  })
  .then((value) => {
    console.log('inside then2');
    console.log(value);
    return value;
  })
  .catch((value) => {
    console.log('inside catch');
    console.log(value);
  });</code>

'async' および 'await' キーワード

「async 関数」とも呼ばれる非同期関数は、非同期プログラミングをさらに簡素化するために導入されました。 。これらの関数には async キーワードが接頭辞として付けられ、await キーワードの使用が可能になります。

await は、内部の式 (通常は Promise) が安定するまで非同期関数の実行を一時停止します。式が解決されると、関数が再開されます。例:

<code class="javascript">async function myAsyncFunc() {
  try {
    const result = await randomProm;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

myAsyncFunc();</code>

この例では、myAsyncFunc は、randomProm Promise の結果を待つ非同期関数です。 Promise が解決または拒否されると、try/catch ブロックの対応するブランチが実行されます。 async と await を利用することで、複雑なコールバック ロジックの必要性がなくなり、コードの可読性が向上します。

以上がJavaScript でスムーズな非同期プログラミングに「async」と「await」を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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