JavaScript 非同期プログラミングの理解: コールバック、Promise、および Async/Await-jsチュートリアル-php.cn

JavaScript 非同期プログラミングの理解: コールバック、Promise、および Async/Await

Linda Hamilton

リリース： 2025-01-04 21:20:39

オリジナル

844 人が閲覧しました

Understanding JavaScript Asynchronous Programming: Callbacks, Promises, and Async/Await

JavaScript の非同期の性質は、ユーザーフレンドリーで応答性が高く、効率的なアプリを作成するために不可欠です。ナビゲーションを成功させるには、コールバック、Promise、async/await などの非同期プログラミングの基本的な考え方を理解することが重要です。このマニュアルでは、これらのアイデアを詳細に分析し、その用途、利点、欠点を検討します。

非同期プログラミングと同期プログラミング

同期プログラミング:

同期プログラミングでは、タスクは順番に実行されます。プログラムはタスクが完了するのを待ってから、次のタスクに進みます。
このアプローチは、特にネットワークリクエストやファイル処理などの時間のかかる操作の際に、非効率につながる可能性があります。

同期コードの例:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

ログイン後にコピー

非同期プログラミング:

非同期プログラミングではタスクを独立して実行できるため、プログラムは一部のタスクが完了するのを待っている間に他の操作の実行を継続できます。
これは、待機中にユーザーインターフェイスがフリーズする可能性があるサーバーからのデータのフェッチなどのタスクに特に役立ちます。

なぜ非同期プログラミングが必要なのでしょうか?

応答性: 長時間の操作中に UI が応答しなくなるのを防ぎます。
効率: 複数の操作の同時実行を可能にし、リソースの使用量を最適化します。
ユーザーエクスペリエンス: スムーズで中断のないワークフローを確保することで、インタラクションを強化します。

コールバック

定義: コールバックは、別の関数に引数として渡され、タスクの完了後に実行される関数です。

例:

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

ログイン後にコピー

説明:

fetchData 関数は、setTimeout を使用して遅延をシミュレートします。
遅延が終了すると、フェッチされたデータを使用してコールバックが実行されます。

コールバックに関する問題:

コールバック地獄: 複数の非同期操作が相互に依存している場合、深くネストされたコールバックにより、コードの読み取りと保守が困難になります。

約束

定義: Promise は、非同期操作の最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。

メリット:

非同期操作のチェーンを簡素化します。
コールバックと比較して、より優れたエラー処理を提供します。

例:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

ログイン後にコピー

説明:

Promise は、成功の場合は .then() を、エラー処理の場合は .catch() を連鎖させることで読みやすさを向上させます。
コールバックに特有の入れ子構造を排除します。

非同期/待機

定義: Async/await は Promise の上に構築された糖衣構文であり、同期コードのように見え、動作する非同期コードを作成できます。

メリット:

コードの可読性と保守性が向上します。
非同期ロジックをより直接的に処理します。

例:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

ログイン後にコピー

説明: