非同期 JavaScript をマスターする: コールバック、Promise、および Async/Await の簡略化

非同期 JavaScript: コールバックから Promise および Async/Await まで

導入

JavaScript は、Web 開発に広く使用されている強力なシングルスレッド プログラミング言語です。 JavaScript における一般的な課題は、メインスレッドをブロックせずに、API からのデータの取得や時間に敏感な操作の実行などの非同期タスクを処理することです。開発者は時間の経過とともに、コールバックの使用から Promise に移行し、現在はより洗練された async/await 構文を使用して非同期操作を管理するようになりました。このガイドでは、基本から始めて高度なシナリオに至るまで、これらの概念を段階的に説明します。最終的には、実際のアプリケーションで非同期 JavaScript を自信を持って使用できるようになります。

---

非同期プログラミングとは何ですか?

JavaScript では、サーバーからのデータの取得、ファイルの読み取り、タイムアウトの設定などのタスクが完了するまでに時間がかかることがあります。これらのタスクが終了するのを待つ代わりに (プログラムの残りの部分の実行がブロックされてしまいます)、JavaScript ではそのようなタスクを非同期で実行できます。これは、メイン プログラム フローから独立して処理され、他のコードを遅延なく実行できることを意味します。

---

コールバックを理解する: 出発点

コールバックとは何ですか?

コールバックは、別の関数に引数として渡される関数です。最初の関数が操作を完了すると、コールバック関数を実行して完了を通知します。

コールバックの例: 基本を理解する

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

説明:

1. fetchData は、遅延を伴うデータのフェッチをシミュレートします。
2. 遅延の後、コールバック関数 (processData) を実行し、データの準備ができたことを示します。

---

コールバック地獄: 問題

ネストされたコールバックを使用して複数の非同期タスクを処理すると、すぐにコードが読めなくなり、保守が困難になる可能性があります。

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

この「破滅のピラミッド」により、コードのデバッグと保守が困難になります。

---

約束: より良い代替案

約束とは何ですか?

promise は、現在、将来、または決して利用できない値を表すオブジェクトです。 Promise には 3 つの状態があります:

• 保留中: 初期状態。満たされても拒否されてもいません。
• 完了: 操作は正常に完了しました。
• 拒否されました: 操作は失敗しました。

Promise の例: コールバック書き換え地獄

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched!");
        callback();
    }, 2000); // Simulates a 2-second delay
}

function processData() {
    console.log("Processing data...");
}

fetchData(processData);

約束のメリット

1. 連鎖により読みやすさが向上しました。
2. .catch() を使用した組み込みエラー処理。
3. 深くネストされたコールバックを回避します。

---

非同期/待機: モダンなエレガンス

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

async/await は ES2017 で導入された、Promise よりも糖衣構文です。非同期コードが同期しているように見えるため、可読性と保守性が向上します。

非同期/待機の例: Promise の簡素化

setTimeout(() => {
    console.log("Step 1: Data fetched");
    setTimeout(() => {
        console.log("Step 2: Data processed");
        setTimeout(() => {
            console.log("Step 3: Data saved");
        }, 1000);
    }, 1000);
}, 1000);

仕組み

1. async キーワード: 関数を非同期として宣言します。
2. await キーワード: Promise が解決または拒否されるまで関数の実行を一時停止します。

非同期/待機の利点

1. シーケンシャルで読み取り可能なコード。
2. try...catch によるエラー処理
3. コールバックの複雑さを軽減します。

---

Async/Await を使用した現実世界のシナリオの処理

並列実行: Promise.all

複数の独立した非同期タスクを並行して実行する必要がある場合:

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

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Processing: ${data}`);
            resolve("Processed data");
        }, 1000);
    });
}

function saveData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Saving: ${data}`);
            resolve("Data saved");
        }, 1000);
    });
}

// Chaining Promises
fetchData()
    .then((data) => processData(data))
    .then((processedData) => saveData(processedData))
    .then((finalResult) => console.log(finalResult))
    .catch((error) => console.error("Error:", error));

エラー処理: try...catch と .catch()

非同期関数の try...catch を使用してエラーを適切に管理します:

async function handleData() {
    try {
        const fetchedData = await fetchData();
        const processedData = await processData(fetchedData);
        const savedData = await saveData(processedData);
        console.log(savedData);
    } catch (error) {
        console.error("Error:", error);
    }
}

handleData();

---

非同期 JavaScript に関する一般的な FAQ

待つことを忘れた場合はどうなりますか?

関数は解決された値の代わりに Promise を返します。これにより、予期しない動作が発生する可能性があります。

async function fetchAllData() {
    const task1 = fetchData();
    const task2 = fetchData();
    const results = await Promise.all([task1, task2]);
    console.log("All data fetched:", results);
}
fetchAllData();

Promise なしで Async/Await を使用できますか?

いいえ、await は Promise に対してのみ機能します。ただし、fetch や Node.js の fs.promises API などのライブラリは、ネイティブの Promise ベースのメソッドを提供します。

コールバックはいつ使用する必要がありますか?

コールバックは、小規模で単純なタスクや、Promise をサポートしていない古い API を操作する場合には依然として役立ちます。

---

結論

非同期 JavaScript をマスターすることは、最新の Web アプリケーションを扱う開発者にとって不可欠です。コールバックから始めると、Promise と async/await がどのように非同期コードを簡素化し、読みやすさを向上させるかを理解することができます。コールバックは控えめに使用し、エラー処理を改善するために Promise を活用し、クリーンで直感的なコードを実現するために async/await を採用します。これらのツールを使用すれば、プロジェクト内のあらゆる非同期の課題に取り組む準備が整います。

以上が非同期 JavaScript をマスターする: コールバック、Promise、および Async/Await の簡略化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。