JavaScript: 非同期/待機

Mary-Kate Olsen
リリース: 2024-11-29 12:06:12
オリジナル
546 人が閲覧しました

async と await は、Promise の操作をより簡単かつ読みやすくする JavaScript の強力な機能です。これらを使用すると、同期コードのように見え、動作する非同期コードを作成できます。簡単な概要は次のとおりです:

非同期関数

  • 定義: 非同期関数は、Promise を返す関数です。これにより、その中で await を使用できるようになります。
  • 構文:
  async function myFunction() {
    // Your code here
  }
ログイン後にコピー

キーワードを待つ

  • 定義: await キーワードは、非同期関数内でのみ使用できます。非同期関数の実行を一時停止し、Promise が解決または拒否されるまで待機します。
  • 構文:
  let result = await somePromise;
ログイン後にコピー

これは、async と await がどのように連携するかを示す簡単な例です。

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

async function getData() {
  console.log('Fetching data...');
  const data = await fetchData();
  console.log(data);
}

getData();
ログイン後にコピー

この例では:

  1. fetchData は、2 秒後に解決される Promise を返す関数です。
  2. getData は、await を使用して fetchData が解決されるのを待つ非同期関数です。
  3. getData が呼び出されると、「データを取得中...」がログに記録され、fetchData が解決されるまで待機してから、「データがフェッチされました」とログが記録されます。

利点

  • 可読性: async/await を使用すると、非同期コードが同期コードのように見えるため、読みやすく理解しやすくなります。
  • エラー処理: async/await で try...catch ブロックを使用すると、エラーをより適切に処理できます。

エラー処理の例

async function getData() {
  try {
    console.log('Fetching data...');
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getData();
ログイン後にコピー

この例では、fetchData が拒否された場合、エラーは catch ブロックによって捕捉され、「データのフェッチ中にエラーが発生しました:」がエラー メッセージとともにログに記録されます。


読んでいただきありがとうございます!
この記事が役に立ち、有益であることを願っています。楽しんでいただけた場合、または何か新しいことを学んだ場合は、お気軽にコメントでご意見を共有するか、私と連絡を取り合ってください。

私の仕事をサポートし、このようなコンテンツの作成を手伝っていただける場合は、私にコーヒーをおごることを検討してください。あなたのサポートは世界を意味し、私のモチベーションを維持します!

またお立ち寄りいただきありがとうございます! ?

Javascript: async/await

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

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート