コールバック、コールバック ヘル、プロミス、非同期/待機

「コーディングは、予期せぬ展開に満ちたサスペンス映画のように感じることがあります。しかし、コードの流れを適切に指示されたシーンと同じくらいスムーズにできるとしたらどうでしょうか?コールバック、Promise、async/await の世界へようこそ!"

1.コールバック

コールバックは、別の関数に引数として渡す関数であり、その関数の完了後に実行されます。次のように考えてください。オンラインで映画チケットを注文し、チケットの準備ができたら電子メール (コールバック関数) を送信するように伝えます。

例:
映画「スパイダーマン 4」のチケットをオンラインで注文すると想像してください:

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    // Simulate a delay with setTimeout
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();  // Notify when the ticket is ready
    }, 2000);
}

function notifyUser() {
    console.log('Your ticket is ready! Enjoy the movie!');
}

orderTicket('Spider-Man 4', notifyUser);

出力:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Your ticket is ready! Enjoy the movie!

ここで、notifyUser は、チケットが注文された後に呼び出されるコールバック関数です。

2. コールバック地獄

コールバック地獄 は、複数のコールバックが相互にネストされている場合に発生し、コードの読み取りと保守が困難になります。ピラミッドか階段のように見えて、何が起こっているのかを追うのは困難です。

例:
ここで、チケットの注文、ポップコーンの入手、座席の検索など、複数のことをすべて順番に実行したいと想像してください。

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();
    }, 2000);
}

function getPopcorn(callback) {
    console.log('Getting popcorn...');
    setTimeout(() => {
        console.log('Popcorn ready!');
        callback();
    }, 1000);
}

function findSeat(callback) {
    console.log('Finding your seat...');
    setTimeout(() => {
        console.log('Seat found!');
        callback();
    }, 1500);
}

orderTicket('Spider-Man 4', function() {
    getPopcorn(function() {
        findSeat(function() {
            console.log('All set! Enjoy the movie!');
        });
    });
});

出力:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

これはコールバック地獄です。コードがどのようにネストされ、読みにくくなるかがわかります。

3. 約束

promise は、非同期操作の最終的な完了 (または失敗) を表すオブジェクトです。これにより、コールバック地獄に陥ることなく、よりクリーンなコードを記述し、非同期タスクをより簡単に処理できるようになります。

例:
Promise
を使用して上記の例を単純化してみましょう

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

orderTicket('Spider-Man 4')
    .then(getPopcorn)
    .then(findSeat)
    .then(() => {
        console.log('All set! Enjoy the movie!');
    });

出力:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Promise は .then() メソッドを連鎖させ、ネストの問題を回避することでコードを読みやすくします。

4. 非同期/待機

Async/await は、同期コードのように見え、動作する非同期コードを作成できる最新の構文です。 Promise に基づいて構築されており、コードがさらにクリーンで理解しやすくなります。

例:
async/await を使用して同じシナリオを処理してみましょう

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

async function watchMovie() {
    await orderTicket('Spider-Man 4');
    await getPopcorn();
    await findSeat();
    console.log('All set! Enjoy the movie!');
}

watchMovie();

出力:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

async/await を使用すると、コードはより単純になり、実際のプロセスを記述する方法に似ています。 await キーワードは、Promise が解決されるまで実行を一時停止し、アクションの流れを理解しやすくします。

まとめ ：

• コールバック: 別の関数が作業を終了した後に実行される関数。
• コールバック地獄: ネストされたコールバックにより、読みにくいコードが生成されます。
• 約束: 非同期タスクを処理するよりクリーンな方法で、コールバック地獄を回避します。
• Async/Await: 非同期コードを処理するための Promise に基づいて構築された最新の読みやすい構文。

「コールバック、Promise、async/await をマスターすることで、複雑なコードをシームレスなエクスペリエンスに変えることができます。コールバック地獄に別れを告げ、よりクリーンで効率的な JavaScript にこんにちは。コーディングを楽しんでください!」

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