JavaScript での非同期と待機

非同期 JavaScript の概要

JavaScript はシングルスレッドです。つまり、一度に 1 つのタスクしか実行できません。複数のタスク、特に API リクエストやファイル読み取りなどの I/O 操作を処理するために、JavaScript は非同期プログラミングを使用します。これにより、長時間実行される操作の完了を待ちながら、他のタスクの実行を継続できます。

コールバック関数

当初、JavaScript の非同期タスクはコールバック関数を使用して処理されていました。コールバックは、引数として別の関数に渡され、操作の完了後に実行される関数です。

例:

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData((message) => {
    console.log(message);
});

約束

Promise は、非同期操作をより効果的に処理するために導入されました。 Promise は、現在、将来、または決して利用できない値を表します。

例:

let promise = new [Promise]((resolve, reject) => {
    setTimeout(() => {
        resolve('Data fetched');
    }, 2000);
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

非同期/待機

Async/Await は Promise の上に構築された糖衣構文で、非同期コードを同期コードのように見せて動作させることができます。これにより、コードが読みやすく、理解しやすくなります。

基本的な使い方

1. 非同期関数: async キーワードで宣言された関数は Promise を返します。
2. Await キーワード: await キーワードは、非同期関数内でのみ使用できます。 Promise が解決されるか拒否されるまで JavaScript を待機させます。

例:

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data fetched'), 2000);
    });

    let result = await promise; // Wait until the promise resolves
    console.log(result);
}

fetchData();

エラー処理

async/await を使用すると、try...catch ブロックを使用してエラー処理が簡単になります。

例:

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('Error fetching data'), 2000);
        });

        let result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

並列実行

複数の非同期操作を並行して実行するには、Promise.all を async/await とともに使用できます。

例:

async function fetchAllData() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));

    let results = await Promise.all([promise1, promise2]);
    console.log(results); // ['Data 1', 'Data 2']
}

fetchAllData();

高度な概念

逐次実行

タスクを順番に実行する必要がある場合は、await one after another を使用します。

例:

async function fetchSequentialData() {
    let data1 = await new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    console.log(data1);

    let data2 = await new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));
    console.log(data2);
}

fetchSequentialData();

Async/Await と従来の Promise の組み合わせ

async/await は、then や catch などの従来の Promise メソッドと組み合わせることができます。

例:

async function fetchData() {
    let data = await fetch('https://api.example.com/data');
    return data.json();
}

fetchData().then((data) => {
    console.log(data);
}).catch((error) => {
    console.error(error);
});

結論

Async/Await は、よりクリーンで読みやすい非同期コードの作成方法を提供することで、JavaScript での非同期操作の操作を簡素化します。これはコールバックを効果的に置き換え、Promise の操作をより直感的にします。

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