JavaScript での非同期プログラミング: コールバック、プロミス、非同期/待機

非同期プログラミングは JavaScript の重要な側面であり、開発者はメイン スレッドをブロックすることなく、長いネットワーク リクエスト、ファイル操作、その他の時間のかかるタスクを実行できます。これにより、アプリケーションの応答性と使いやすさが確保されます。 JavaScript は、非同期操作を処理するための 3 つの主な方法、コールバック、プロミス、および非同期/待機を提供します。この記事では、これらの各メソッドについて詳しく説明し、詳細な例を通じてその構文、使用法、相違点を探っていきます。

目次

1. 非同期プログラミングの概要
2. コールバック
   • 構文と例
   • メリットとデメリット
3. 約束
   • 構文と例
   • 約束の連鎖
   • メリットとデメリット
4. 非同期/待機
   • 構文と例
   • エラー処理
   • メリットとデメリット
5. 比較とベストプラクティス
6. 結論

非同期プログラミングの概要

JavaScript では、サーバーからのデータの取得、ファイルの読み取り、計算の実行など、完了までに時間がかかる操作を非同期で処理できます。これは、操作が完了するのを待っている間、JavaScript エンジンは他のタスクの実行を継続できることを意味します。これは、Web アプリケーションで効率的かつスムーズなユーザー エクスペリエンスを作成するために非常に重要です。

コールバック

構文と例

コールバックは、JavaScript で非同期操作を処理するための最も初期のメソッドの 1 つです。コールバックは、別の関数に引数として渡される単なる関数であり、非同期操作が完了すると実行されます。

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched!");
    }, 1000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);

上記の例では、fetchData は setTimeout を使用して非同期操作をシミュレートします。 1 秒後、displayData 関数を呼び出し、取得したデータを引数として渡します。

メリットとデメリット

利点:

• 小さなタスクにはシンプルで簡単です。
• 非同期操作の完了後にコードを実行する方法を提供します。

欠点:

• 複数の非同期操作がネストされている場合、「コールバック地獄」が発生する可能性があり、コードの読み取りと保守が困難になります。
• エラーはコールバックごとに管理する必要があるため、エラー処理は面倒です。

約束

構文と例

Promise は、コールバックに関連する問題に対処するために ES6 (ECMAScript 2015) で導入されました。 Promise は、まだ完了していないが、将来に期待される操作を表します。保留、履行、または拒否の 3 つの状態のいずれかになります。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

この例では、fetchData は「データがフェッチされました!」で解決される Promise を返します。 1秒後。 then メソッドは解決された値を処理するために使用され、catch はエラーを処理するために使用されます。

約束を連鎖させる

Promise を連鎖させて、一連の非同期操作を順番に実行できます。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${data} Processed!`);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log(data);
        return processData(data);
    })
    .then(processedData => {
        console.log(processedData);
    })
    .catch(error => {
        console.error("Error:", error);
    });

この例では、fetchData の後に processData が呼び出され、then を使用して結果が順番に処理されます。

メリットとデメリット

利点:

• 非同期操作の連鎖を許可することでコールバック地獄を回避します。
• catch による組み込みのエラー処理を提供します。
• コードの可読性と保守性が向上します。

欠点:

• 複数のネストされた then 呼び出しでは依然として複雑になる可能性があります。
• チェーン内のエラー処理は簡単ではない場合があります。

非同期/待機

構文と例

ES2017 で導入された Async/Await は、Promises を使用して非同期コードを記述する、より読みやすく簡潔な方法を提供します。 async キーワードは非同期関数を定義するために使用され、await キーワードは Promise が解決されるまで実行を一時停止するために使用されます。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

async function displayData() {
    const data = await fetchData();
    console.log(data);
}

displayData();

この例では、displayData はデータをログに記録する前に fetchData が完了するのを待つ非同期関数です。

エラー処理

Async/Await によるエラー処理は、try/catch ブロックを使用して実行できます。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Failed to fetch data!");
        }, 1000);
    });
}

async function displayData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

displayData();

ここで、fetchData が失敗した場合、エラーは catch ブロックによって捕捉され、ログに記録されます。

メリットとデメリット

利点:

• 非同期コードを簡素化し、同期コードのように見せます。
• コードの可読性と保守性が向上します。
• try/catch ブロックを使用してエラー処理を簡素化します。

欠点:

• Async/Await は Promise の上に構築されているため、Promise を理解する必要があります。
• まだ比較的新しいため、一部の環境では完全にサポートされていない可能性があります。

比較とベストプラクティス

比較

• コールバック: 単純な単一レベルの非同期タスクに適していますが、複雑なシナリオではコールバック地獄につながる可能性があります。
• 約束: 可読性と管理性を向上させ、非同期操作のチェーン化を可能にします。 catch を使用した組み込みエラー処理。
• Async/Await: 非同期コードを記述するための最も読みやすく保守しやすい方法を提供します。エラー処理が簡素化され、同期コードのように見えます。

ベストプラクティス

• 非同期操作を処理する必要があるほとんどのシナリオでは、Async/Await を使用します。最高の読みやすさとシンプルさを提供します。
• 複数の非同期操作を順番に実行する必要がある場合、または Promises を返すライブラリを使用する場合は、Promises を使用します。
• レガシー コードを使用する場合、または非常に単純な非同期タスクを処理する場合を除き、コールバックを避けてください。

以上がJavaScript での非同期プログラミング: コールバック、プロミス、非同期/待機の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。