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

導(dǎo)入

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

---

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

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

---

コールバックを理解する: 出発點(diǎn)

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

コールバックは、別の関數(shù)に引數(shù)として渡される関數(shù)です。最初の関數(shù)が操作を完了すると、コールバック関數(shù)を?qū)g行して完了を通知します。

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

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. 遅延の後、コールバック関數(shù) (processData) を?qū)g行し、データの準(zhǔn)備ができたことを示します。

---

コールバック地獄: 問題

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

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 は、現(xiàn)在、將來、または決して利用できない値を表すオブジェクトです。 Promise には 3 つの狀態(tài)があります:

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

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. 深くネストされたコールバックを回避します。

---

非同期/待機(jī): モダンなエレガンス

非同期/待機(jī)とは何ですか?

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

非同期/待機(jī)の例: Promise の簡(jiǎn)素化

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 キーワード: 関數(shù)を非同期として宣言します。
2. await キーワード: Promise が解決または拒否されるまで関數(shù)の実行を一時(shí)停止します。

非同期/待機(jī)の利點(diǎn)

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

---

Async/Await を使用した現(xiàn)実世界のシナリオの処理

並列実行: Promise.all

複數(shù)の獨(dú)立した非同期タスクを並行して実行する必要がある場(chǎng)合:

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()

非同期関數(shù)の 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

待つことを忘れた場(chǎng)合はどうなりますか?

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

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 に対してのみ機(jī)能します。ただし、fetch や Node.js の fs.promises API などのライブラリは、ネイティブの Promise ベースのメソッドを提供します。

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

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

---

結(jié)論

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

以上が非同期 JavaScript をマスターする: コールバック、Promise、および Async/Await の簡(jiǎn)略化の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。