JavaScript Async/awaitingの初心者ガイド、例があります

マスターJavaScript非同期操作：async/await detterfort /

を探り、非同期操作を効率的に制御し、より明確かつ読みやすいコードを作成する方法を教えます。

asyncawaitコアポイント：

JavaScriptでは、

/が非同期操作の処理を簡素化し、コードを同期して実行されているように見えるようにしますが、それでも非ブロッキングです。

• async関数は約束を返し、awaitキーワードは、約束が解決されるまで関数実行を一時停止し、それによりコードとフロー制御の読みやすさを向上させます。
• async関数のエラー処理は、await/
ブロックまたは
• メソッドを使用して効率的に管理できます。 async trycatchを使用して、非同期コマンドを並行して最適化し、複数のPromiseを連続的に実行するのではなく、同時に解決できるようにします。 catch()
Async Iteratorsおよびループにより、ループ内の
• 関数の正しい処理が可能になり、実行の正しい順序とパフォーマンス管理の向上が確保されます。 Promise.all ES2022によって導入された最上層により、ESモジュールの最上層でPromiseを使用することができ、追加のラッパーを必要とせずに非同期コードの統合を簡素化します。
• for...ofasyncコンテンツの概要：
• await await JavaScriptの非同期関数を作成する方法

キーワード

キーワード

非同期関数を宣言するさまざまな方法
1. • async
   javascript
   • /awaitアンダーグラウンド使用約束
   • 約束から
   /
に切り替えます
2. await 非同期関数でのエラー処理async
   関数呼び出しを使用した
   • メソッドasyncawait
非同期コマンドを並行して実行します
3. 同期ループの非同期トップレベル
4. catch()
非同期コードを自信を持って記述します
5. JavaScriptでは、一部の操作は非同期です。これは、彼らが生成する結果または値がすぐに利用できないことを意味します。
6. 次のコードを検討してください：await
7. javaScriptインタープリターは、次のステートメントを実行する前に非同期await関数が完了するのを待ちません。したがって、API
によって返された実際のデータを記録します。
多くの場合、これは予想される動作ではありません。幸いなことに、

および

キーワードを使用して、プログラムを非同期操作が完了する前に完了するまで、実行を続けることができます。

この機能は、ES2017でJavaScriptを導入し、すべての最新のブラウザによってサポートされています。

function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');

JavaScriptの非同期関数を作成する方法

fetchDataFromApi 数据获取完成

関数のデータ収集ロジックを詳しく見てみましょう。 JavaScriptでのデータフェッチは、非同期操作の主要な例です。

asyncFetch APIを使用して、これを行うことができます：await

function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');

ここで、Jokeapiからプログラミングジョークがあります。 APIの応答はJSON形式であるため、リクエストが完了した後（json()メソッドを使用して）応答を抽出し、ジョークをコンソールにログに記録します。

JokeapiはサードパーティのAPIであるため、ジョークの品質を保証することはできません。

このコードをブラウザまたはノードで実行する場合（

フラグを使用してバージョン17.5）、コンソールが間違った順序でコンテンツを記録していることがわかります。 --experimental-fetch

変更しましょう。

キーワードasync

最初に行う必要があるのは、含まれる関数を非同期関数としてマークすることです。

キーワードを使用してこれを行うことができ、asyncキーワードの前に配置します：function

function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

fetchDataFromApi();
console.log('数据获取完成');

async関数は常に約束を返します（詳細については後で詳しく説明します）ので、

を関数呼び出しにリンクして、正しい実行順序を取得します：then()

async function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

今コードを実行すると、次のようなものが表示されます：

fetchDataFromApi()
  .then(() => {
    console.log('数据获取完成');
  });

しかし、私たちはこれをしたくありません！ JavaScriptのPromiseの構文は少し複雑になる可能性があります。そこには、

/asyncが点滅します。これにより、同期コードのように見える構文を使用して非同期コードを作成できます。 await

キーワードawait

次に行うことは、

キーワードを使用して、関数の非同期操作を序文に序文で序じることです。これにより、JavaScriptインタープリターが実行を「一時停止」し、結果を待つようになります。これらの操作の結果を変数に割り当てることができます。 await また、

関数を呼び出す結果を待つ必要があります：

<code>程序员的浪漫：一行代码解决千行代码的bug。
数据获取完成</code>

fetchDataFromApi残念ながら、今すぐコードを実行しようとすると、エラーが発生します。

これは、非モジュールスクリプトで

async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

関数の外側で

を使用できないためです。これについては後で詳しく説明しますが、この問題を解決する最も簡単な方法は、コールコードを独自の関数で包むことです。

await fetchDataFromApi();
console.log('数据获取完成');

今すぐコードを実行すると、すべてが正しい順序で出力される必要があります：

async この追加のボイラープレートコードが必要であるという事実は残念ですが、私の意見では、コードは約束ベースのバージョンよりも読みやすいです。 await 非同期関数を宣言するさまざまな方法async

<code>Uncaught SyntaxError: await is only valid in async functions, async generators and modules</code>

前の例では、2つの名前のfunction宣言（

キーワードの後に​​関数名）を使用しますが、これに限定されません。また、関数式、矢印関数、および匿名関数を

としてマークすることもできます。

async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

async function init() {
  await fetchDataFromApi();
  console.log('数据获取完成');
}

init();

関数宣言と関数式の式の違いを確認する場合は、ガイドをご覧ください

function（次の内容は同じです。元のテキストに従って段落で段落を書き換え、元の意味を維持し、言語スタイルを調整してよりスムーズで自然にする）

以上がJavaScript Async/awaitingの初心者ガイド、例がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。