JavaScript での Async/Await をマスターする: 包括的なガイド-jsチュートリアル-php.cn

JavaScript での Async/Await をマスターする: 包括的なガイド

Susan Sarandon

リリース： 2024-11-28 10:56:10

オリジナル

514 人が閲覧しました

Mastering Async/Await in JavaScript: A Comprehensive Guide

1. 非同期/待機とは何ですか?

1.1 非同期 JavaScript について

非同期プログラミングを使用すると、JavaScript はメインスレッドをブロックせずにタスクを実行できます。これは、API 呼び出し、ファイル操作、長時間実行プロセスなどのタスクにとって重要です。従来の JavaScript コーディングでは、これらの非同期操作を処理するためにコールバックまたは Promise が使用されていました。

1.2 約束の役割

約束は、現在、将来、または決して利用できない可能性がある値を表します。これらはコールバックに代わるよりクリーンな代替手段を提供し、開発者がより管理しやすいコードを作成できるようにします。ただし、深くネストされた Promise を処理すると、コードが複雑で読みにくくなる可能性があります。

1.3 非同期関数の概要

非同期関数を使用すると、非同期コードの作成が簡素化されます。非同期関数は常に Promise を返すため、開発者は await キーワードを使用して Promise が解決されるまで実行を一時停止し、同期的に見えるコードを作成できます。

2. 非同期関数の分解

2.1 非同期関数の作成

非同期関数を作成するには、関数宣言の前に async キーワードを使用するだけです。例:

async function fetchData() {
   // Your code here
}

ログイン後にコピー

2.2 非同期関数の動作

非同期関数は Promise を返します。これは、呼び出し元が .then() と .catch() を使用してそれを処理できることを意味します。非同期関数がエラーをスローした場合、Promise は拒否されます。

2.3 Promise 戻り値の型

すべての非同期関数は自動的に Promise を返します。非 Promise 値が返された場合、それは Promise でラップされます。

3. Await キーワード

3.1 Promise での Await の使用

await キーワードは、非同期関数内でのみ使用できます。 Promise が解決されるか拒否されるまで、非同期関数の実行を一時停止します。

async function getData() {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();
    console.log(json);
}

ログイン後にコピー

3.2 非同期呼び出しのチェーン化

await を使用して複数の非同期呼び出しを連鎖させると、コードがすっきりして理解しやすくなります。

3.3 複数の Promise の処理

複数の Promise を扱う場合、Promise.all() を await と組み合わせて使用すると、すべての Promise が解決されるまで待機できます。

async function fetchAllData() {
    const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]);
    // Process data1 and data2
}

ログイン後にコピー

4. Async/Await でのエラー処理

4.1 Try/Catch ブロック

非同期関数のエラーを処理するには、await 呼び出しを try/catch ブロックでラップします。

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

ログイン後にコピー