非同期を簡単に: JavaScript コールバック、Promise、Async/Await の詳細

JavaScript はシングルスレッド言語です。つまり、一度に 1 つのタスクを実行できます。ただし、イベント ループのおかげで、データのフェッチ、ファイルの読み取り、ユーザー操作の処理などの非同期操作を効率的に管理でき、これらのタスクがメイン スレッドをブロックしないようにできます。ただし、Web アプリケーションでは、API からのデータの取得、ファイルの読み取り、ユーザー操作の処理など、複数の操作を同時に実行する必要があることがよくあります。メインスレッドをブロックすることなくこれらのタスクを効率的に処理するために、JavaScript は非同期プログラミング手法を使用します。この記事では、非同期 JavaScript の中心的な概念であるコールバック、プロミス、および Async/Await について詳しく説明します。これらの概念を理解することは、応答性の高い高パフォーマンスの Web アプリケーションを構築するために不可欠です。効果的に実装する方法を理解できるように、詳細な例を使用して各概念を段階的に説明します。

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

非同期プログラミングを使用すると、長時間実行される操作が完了するのを待機している間に、コードで他のタスクを実行できます。これは、応答性の高い Web アプリケーションを作成するために重要です。 JavaScript で非同期プログラミングに使用される 3 つの主要なメソッドを詳しく見てみましょう:

1. コールバック
2. 約束
3. 非同期/待機

それぞれの方法には、独自の長所と短所があります。これらの方法を理解すると、特定のユースケースに適したアプローチを選択するのに役立ちます。

コールバック

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

コールバックは、別の関数に引数として渡され、その関数の完了後に実行される関数です。コールバックは JavaScript の基本概念であり、非同期プログラミングやイベント処理などで広く使用されています。コールバックは、JavaScript で非同期操作を処理するために使用される最も初期のメソッドの 1 つです。

コールバックの例

コールバック関数の簡単な例から始めましょう:

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 2000);
}

function displayData(data) {
    console.log(`Name: ${data.name}, Age: ${data.age}`);
}

fetchData(displayData);

この例では、fetchData は setTimeout を使用して非同期操作をシミュレートします。操作が完了すると、取得したデータを使用して displayData 関数を呼び出します。

コールバックの問題: コールバック地獄

コールバックは単純ですが、複数の非同期操作を処理する場合、深く入れ子になったコードが発生する可能性があり、これは「コールバック地獄」または「破滅のピラミッド」として知られる現象です。

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 2000);
}

function fetchMoreData(data, callback) {
    setTimeout(() => {
        data.job = 'Developer';
        callback(data);
    }, 2000);
}

function displayData(data) {
    console.log(`Name: ${data.name}, Age: ${data.age}, Job: ${data.job}`);
}

fetchData((data) => {
    fetchMoreData(data, (updatedData) => {
        displayData(updatedData);
    });
});

ご覧のとおり、ネストされたコールバックにより、コードの読み取りと保守が困難になります。

約束

約束とは何ですか?

コールバックに関連する問題に対処するために Promise が導入されました。 Promise は、非同期操作の最終的な完了または失敗を表すオブジェクトです。 Promise には、保留中 (初期状態)、履行済み (操作が正常に完了した)、および拒否済み (操作が失敗した) の 3 つの状態があります。これにより、操作を連鎖させてコードを読みやすくすることができます。

約束の例

Promise を使用して前の例を書き直す方法は次のとおりです。

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = { name: 'John', age: 30 };
            resolve(data);
        }, 2000);
    });
}

function fetchMoreData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            data.job = 'Developer';
            resolve(data);
        }, 2000);
    });
}

fetchData()
    .then((data) => fetchMoreData(data))
    .then((updatedData) => {
        console.log(`Name: ${updatedData.name}, Age: ${updatedData.age}, Job: ${updatedData.job}`);
    });

この例では、各非同期操作は Promise を返し、then メソッドを使用して操作を連鎖させます。

Promise によるエラー処理

Promise を使用すると、エラー処理も簡単になります。 catch メソッドを使用すると、一連の非同期操作でエラーを処理できます。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Simulate a success or failure
            if (success) {
                const data = { name: 'John', age: 30 };
                resolve(data);
            } else {
                reject('Failed to fetch data');
            }
        }, 2000);
    });
}

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

非同期/待機

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

Async/Await は、ES2017 (ES8) で導入された、Promise の上に構築された糖衣構文です。これにより、同期と同様の方法で非同期コードを作成できるため、特に複数の非同期操作を処理する場合に、可読性が大幅に向上し、制御フローが簡素化されます。これにより、非同期コードを同期的な方法で作成できるため、コードが読みやすくなり、デバッグが容易になります。

非同期/待機の例

Promise ベースの例を async/await を使用するように変換しましょう:

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = { name: 'John', age: 30 };
            resolve(data);
        }, 2000);
    });
}

function fetchMoreData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            data.job = 'Developer';
            resolve(data);
        }, 2000);
    });
}

async function displayData() {
    try {
        const data = await fetchData();
        const updatedData = await fetchMoreData(data);
        console.log(`Name: ${updatedData.name}, Age: ${updatedData.age}, Job: ${updatedData.job}`);
    } catch (error) {
        console.error(error);
    }
}

displayData();

Async/Await によるエラー処理

async/await でのエラー処理は簡単です。 try/catch ブロックを使用してエラーを処理できます:

async function displayData() {
    try {
        const data = await fetchData();
        const updatedData = await fetchMoreData(data);
        console.log(`Name: ${updatedData.name}, Age: ${updatedData.age}, Job: ${updatedData.job}`);
    } catch (error) {
        console.error(error);
    }
}

displayData();

コールバック、Promise、Async/Await の比較

可読性

• Callbacks: Callbacks: Can lead to callback hell, making the code difficult to read, maintain, and debug, often resulting in error-prone code.
• Promises: Improve readability by allowing you to chain operations.
• Async/Await: Provides the best readability by allowing you to write asynchronous code in a synchronous manner.

Error Handling

• Callbacks: Callbacks: Error handling is more cumbersome and often involves passing error objects through multiple layers of callbacks, leading to complex and hard-to-manage code. Promises and async/await simplify this process by providing more streamlined and centralized error handling mechanisms.
• Promises: Simplifies error handling with the catch method.
• Async/Await: Makes error handling even simpler with try/catch blocks.

Use Cases

• Callbacks: Suitable for simple, single asynchronous operations.
• Promises: Ideal for chaining multiple asynchronous operations.
• Async/Await: Best for complex asynchronous operations and when readability is a priority.

FAQs

What Is the Main Advantage of Using Promises Over Callbacks?

The main advantage of using promises over callbacks is improved readability and maintainability of the code. Promises avoid the nested structure of callbacks, making the code more linear and easier to follow.

Can I Use Async/Await with Older Browsers?

Async/await is supported in most modern browsers. However, for older browsers, you may need to use a transpiler like Babel to convert your async/await code to ES5.

How Do I Handle Multiple Promises Concurrently?

You can use Promise.all to handle multiple promises concurrently. For example:

const promise1 = fetchData();
const promise2 = fetchMoreData(data);

Promise.all([promise1, promise2])
    .then((results) => {
        const [data, moreData] = results;
        console.log(data, moreData);
    })
    .catch((error) => {
        console.error(error);
    });

Is Async/Await Always Better Than Promises?

Async/await is generally more readable than promises, but promises can be more appropriate in certain scenarios, such as when dealing with multiple concurrent operations.

How Do I Cancel an Asynchronous Operation?

JavaScript doesn't natively support canceling promises. However, you can use techniques like AbortController for fetch requests or implement your own cancellation logic.

Conclusion

Asynchronous programming is a fundamental aspect of JavaScript that allows you to build responsive and efficient web applications. Understanding the differences between callbacks, promises, and async/await is crucial for writing clean, maintainable code. By mastering callbacks, promises, and async/await, and understanding when to use each, you can significantly improve the readability, maintainability, and performance of your applications. This knowledge will empower you to tackle any asynchronous challenge with confidence and efficiency. Whether you choose callbacks for simple tasks, promises for chaining operations, or async/await for readability, mastering these concepts will make you a more effective JavaScript developer.

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