回調、回調地獄、Promise、非同步/等待

「程式設計有時感覺就像一部懸疑電影- 充滿了意想不到的曲折。但是，如果您可以讓程式碼像精心設計的場景一樣流暢，該怎麼辦？ 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);

輸出：

這裡的notifyUser是訂票後呼叫的回呼函數。

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

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!');
    });

輸出：

Promise 透過連結 .then() 方法讓程式碼更易於閱讀，避免巢狀問題。

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

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

輸出：

使用 async/await，程式碼更簡單，類似於現實生活中描述流程的方式。 wait 關鍵字會暫停執行，直到 Promise 解決，讓操作流程易於遵循。

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

概括 ：

回呼：
• 另一個函數完成其工作後執行的函數。
回呼地獄：
• 巢狀回呼導致程式碼難以閱讀。
Promise：
• 一種更簡潔的方式來處理非同步任務，避免回調地獄。
非同步/等待：
• 基於 Promise 建構的現代、易於閱讀的語法，用於處理非同步程式碼。

「透過掌握回呼、Promise 和非同步/等待，您可以將複雜的程式碼變成無縫的體驗。告別回呼地獄，迎接更乾淨、更有效率的JavaScript。快樂編碼！」

以上是回調、回調地獄、Promise、非同步/等待的詳細內容。更多資訊請關注PHP中文網其他相關文章！