JavaScript での非同期と待機の威力を探る

前回のチュートリアルでは、JavaScript の Promise の基本について説明しました。記事の最後で、Promise を使用するとコードを非同期で実行できると述べました。

このチュートリアルでは、JavaScript の async および await キーワードについて学習します。これにより、Promise を効果的に使用し、よりクリーンな非同期コードを作成できるようになります。

定義 async 関数

非同期関数から始めましょう。次の挨拶関数を考えてみましょう:

これは、これまでに見た単なる通常の JavaScript 関数です。これは「Hello, World!」という文字列を返すだけですが、次のように async を前に追加するだけで、これを非同期関数に変えることができます。 リーリー

Hello, World! に設定された Promise オブジェクトを返します。つまり、Promise は正常に解決されました。

async キーワードを使用すると、戻り値が解決された Promise オブジェクトにラップされることになります。解決された Promise の値は、async 関数から返された値と同じになります。

async 関数から独自の Promise を返すこともできます: リーリー

async キーワードは、常に Promise を返す関数を定義するのに役立ちます。 Promise を自分で明示的に返すことも、関数で Promise ではない戻り値を Promise にラップさせることもできます。

await キーワード

async 関数にも、0 個以上の await 式を含めることができます。 await キーワードは async 関数内でのみ有効であることに留意することが重要です。 await キーワードは、Promise が解決されるか拒否されるのを待ってから、完了した値を取得するために使用されます。

await キーワードを使用します。構文は次のとおりです。 リーリー

Promise にすることができ、その場合は直接使用され、ネイティブに待機されます。この場合、then() への暗黙的な呼び出しはありません。式は thenable オブジェクトにすることができます。その場合、then() メソッドを呼び出すことによって新しい Promise が構築されます。式は、thenable でない値にすることもできます。この場合、既に実装されている Promise が使用できるように構築されます。

async 関数の実行は、次のティックまで一時停止されます。これを覚えておくことが重要です。

async 関数で await キーワードを使用する例を示します。 リーリー これは、Promise を明示的に使用する場合に、

関数で await キーワードを使用する別の例です: リーリー 今回は、2 秒で解決される Promise を明示的に使用します。したがって、「Hello, World」という挨拶は 2 秒後に出力されます。

ステートメントの実行順序を理解する

次に、2 つの異なる挨拶関数を作成し、結果が出力される順序を確認します。

最初の関数

は、出力として文字列を返す通常の関数です。 2 番目の関数は async 関数で、await キーワードの後に​​式を使用します。この場合の戻り値は、履行された Promise です。 これらすべての関数を呼び出して出力を記録するコード スニペットは次のとおりです:

Adam からのご挨拶

関数呼び出しが終了しました。しかし、彼は最初にアウトプットで歓迎されました。これは、関数呼び出しが文字列を直接返すためです。

最初に Andrew に挨拶する関数呼び出しは、履行された Promise の構築につながります。ただし、実行は次のクロック サイクルまで中断されたままになります。そのため、出力の挨拶は Adam への挨拶の後に表示されます。 次に、複数のステートメントを含むもう少し複雑な

関数を定義します。これらのステートメントの 1 つに await キーワードが含まれます。 async 関数で await キーワードを使用すると、await ステートメントに続く他のステートメントの実行が一時停止されることがわかります。 リーリー この

関数には、明示的に定義された Promise が含まれており、その前に await キーワードが続きます。これは、await キーワードが Promise が履行されるのを待ってから、履行された値を返すことを意味します。 Promise が実現するまでに 2 秒かかるため、約 2 秒後にコンソール ログに「After Await...」と表示されるはずです。 これは、

関数のいくつかのステートメントを記録するコード スニペットです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">console.log(&quot;Before Greeting Function...&quot;); aa_greet(&quot;Monty&quot;).then((msg) =&gt; console.log(msg)); console.log(&quot;After Greeting Function...&quot;); /* Output in Order 23:42:15.327 Before Greeting Function... 23:42:15.331 Before Await... 23:42:15.331 After Greeting Function... 23:42:17.333 After Await... 23:42:17.333 Hello, Monty! */ </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>首先记录字符串“Before Greeting Function...”，因为这是我们进行的第一次调用。之后，我们调用 <code>aa_greet() 函数。这会导致输出字符串“Before Await...”。然后，浏览器遇到 await 关键字。所以它等待承诺解决。与此同时，aa_greet()函数之外的代码继续执行。这就是为什么我们在下一个日志条目中得到“After Greeting Function...”字符串作为输出。

一旦承诺得到解决，浏览器就会继续执行，我们会得到“After Await...”作为输出。最后，我们解析的问候语作为承诺返回，因为我们使用 async 函数。我们对这个已解决的 Promise 调用 then() 方法并记录“Hello, Monty!”到控制台。

通过 Fetch API 使用 async 和 await

await 关键字的一个常见用例是从远程 API 获取数据。这允许比嵌套回调或承诺链更干净的代码。

async function getData() {
    // use the fetch API to fetch data from an API endpoint
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    
    // check if the response is okay (HTTP status code 200-299)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // parse the response as JSON
    const data = await response.json();
    
    return data;
}

在此函数中，首先我们等待对 API 查询的初始响应。如果响应正常，我们就会等待 JSON 格式的完整响应数据。我们返回 JSON 数据，但请记住，由于这是一个异步函数，因此我们实际上返回一个最终解析为该数据的 Promise。因此，如果您想访问结果数据，您必须再次使用类似await关键字的东西！

const data = await getData();

最终想法

在上一篇教程中了解了 Promise 对象后，我们在本教程中讨论了 async 函数和 await 关键字。您现在应该能够编写自己的 async 函数，使用 await 关键字来使用更清晰、更易读的代码实现基于 Promise 的行为。

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