コールバック、コールバックヘル、プロミス、非同期/待機-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-08-29 11:05:33

オリジナル

1100 人が閲覧しました

Callbacks, Callback Hell, Promises, Async/Await

「コーディングは、予期せぬ展開に満ちたサスペンス映画のように感じることがあります。しかし、コードの流れを適切に指示されたシーンと同じくらいスムーズにできるとしたらどうでしょうか?コールバック、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 が解決されるまで実行を一時停止し、アクションの流れを理解しやすくします。