Panggilan Balik, Neraka Panggilan Balik, Janji, Async/Await

“Pengekodan kadangkala boleh terasa seperti filem yang menegangkan - penuh dengan liku-liku yang tidak dijangka. Tetapi bagaimana jika anda boleh membuat kod anda mengalir dengan lancar seperti adegan yang diarahkan dengan baik? Selamat datang ke dunia panggilan balik, janji dan async/menunggu!”

1. Panggil balik

panggilan balik ialah fungsi yang anda hantar sebagai hujah kepada fungsi lain, yang kemudiannya dilaksanakan selepas selesai fungsi itu. Fikirkan seperti ini: Anda memesan tiket wayang dalam talian, dan anda memberitahu mereka untuk menghantar e-mel kepada anda (fungsi panggil balik) apabila tiket sudah sedia.

Contoh:
Bayangkan anda sedang menempah tiket untuk filem "Spider-Man 4" dalam talian:

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

Output:

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

Di sini, notifyUser ialah fungsi panggil balik yang dipanggil selepas tiket ditempah.

2. Neraka Panggilan Balik

Neraka panggilan balik berlaku apabila anda mempunyai beberapa panggilan balik bersarang di dalam satu sama lain, menjadikan kod itu sukar dibaca dan diselenggara. Ia kelihatan seperti piramid atau tangga, dan sukar untuk mengikuti apa yang berlaku.

Contoh:
Sekarang bayangkan anda ingin melakukan pelbagai perkara, seperti memesan tiket, mendapatkan popcorn dan mencari tempat duduk anda, semuanya mengikut urutan:

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

Output:

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

Ini adalah neraka panggilan balik: anda boleh melihat bagaimana kod menjadi lebih bersarang dan sukar dibaca.

3. Janji

janji ialah objek yang mewakili penyiapan (atau kegagalan) operasi tak segerak. Ia membolehkan anda menulis kod yang lebih bersih dan mengendalikan tugas tak segerak dengan lebih mudah tanpa jatuh ke dalam neraka panggilan balik.

Contoh:
Mari ringkaskan contoh di atas menggunakan janji

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

Output:

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

Janji menjadikan kod lebih mudah dibaca dengan merantai kaedah .then(), mengelakkan masalah bersarang.

4. Async/Tunggu

Async/wait ialah sintaks moden yang membolehkan anda menulis kod tak segerak yang kelihatan dan berkelakuan seperti kod segerak. Ia dibina di atas janji dan menjadikan kod lebih bersih dan lebih mudah difahami.

Contoh:
Mari gunakan async/tunggu untuk mengendalikan senario yang sama

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

Output:

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

Dengan async/menunggu, kod adalah lebih mudah, menyerupai cara anda menerangkan proses dalam kehidupan sebenar. Kata kunci tunggu menjeda pelaksanaan sehingga janji diselesaikan, menjadikan aliran tindakan mudah diikuti.

Ringkasan :

• Panggil balik: Fungsi yang dilaksanakan selepas fungsi lain menyelesaikan kerjanya.
• Neraka Panggilan Balik: Panggilan balik bersarang yang membawa kepada kod yang sukar dibaca.
• Janji: Cara yang lebih bersih untuk mengendalikan tugas tak segerak, mengelakkan panggilan balik neraka.
• Async/Await: Sintaks moden dan mudah dibaca yang dibina berdasarkan janji untuk mengendalikan kod tak segerak.

"Dengan menguasai panggilan balik, janji dan async/menunggu, anda boleh menukar kod kompleks menjadi pengalaman yang lancar. Ucapkan selamat tinggal kepada panggilan balik neraka dan hello kepada JavaScript yang lebih bersih dan lebih cekap. Selamat mengekod!"

Atas ialah kandungan terperinci Panggilan Balik, Neraka Panggilan Balik, Janji, Async/Await. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!