The Callback Hell, Menulis Cleaner Asynchronous JavaScript

Jika anda telah bekerja dengan JavaScript untuk apa-apa tempoh masa yang besar, anda berkemungkinan menghadapi "neraka panggil balik"—kekacauan yang kusut dengan panggilan balik bersarang yang menjadikan kod anda sukar dibaca dan lebih sukar untuk dikekalkan. Tetapi inilah berita baiknya: dengan alat dan corak yang betul, anda boleh mengelakkan panggilan balik sama sekali dan menulis kod tak segerak yang bersih dan cekap. Mari terokai caranya.

Janji: Langkah Pertama untuk Membersihkan Kod Async

Janji ialah cara yang lebih tersusun untuk mengendalikan operasi tak segerak dalam JavaScript dan ia membantu menghapuskan panggilan balik bersarang dalam. Daripada meneruskan fungsi sebagai argumen dan menyarangkannya, Promises membenarkan anda merantai operasi dengan kaedah .then() dan .catch(). Ini mengekalkan kod linear dan lebih mudah untuk diikuti.
Contoh:

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Dalam pendekatan berasaskan Janji ini, setiap langkah mengikut langkah sebelumnya dengan cara yang jelas dan linear, menjadikannya lebih mudah untuk menjejaki aliran kod dan nyahpepijat jika perlu.

Async/Await: Penyelesaian Moden

Walaupun Promises bagus untuk membersihkan panggilan balik bersarang, ia masih boleh berasa menyusahkan apabila berurusan dengan berbilang tindakan tak segerak. Masukkan async dan tunggu. Ciri JavaScript moden ini membolehkan anda menulis kod tak segerak yang kelihatan hampir seperti kod segerak, meningkatkan kebolehbacaan dan kebolehselenggaraan.
Contoh:

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

Dengan async/menunggu, anda boleh mengendalikan Janji dengan cara yang terasa lebih intuitif, terutamanya untuk pembangun yang biasa menulis kod segerak. Ia menghapuskan keperluan untuk rantaian .then() dan memastikan kod anda kelihatan lurus, dari atas ke bawah.

Pecah Tugas Besar Kepada Fungsi Kecil

Satu lagi teknik hebat untuk mengelakkan panggilan balik neraka ialah memecahkan tugas yang besar dan kompleks kepada fungsi yang lebih kecil dan boleh digunakan semula. Pendekatan modular ini bukan sahaja meningkatkan kebolehbacaan tetapi juga menjadikan kod anda lebih mudah untuk nyahpepijat dan diselenggara.

Sebagai contoh, jika anda perlu mengambil data daripada API dan memprosesnya, bukannya menulis segala-galanya dalam satu fungsi besar, anda boleh memecahkannya:

Contoh:

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    return await response.json();
}

async function processData(data) {
    // Process your data here
    return data.map(item => item.name);
}

async function main() {
    try {
        const data = await fetchData();
        const processedData = await processData(data);
        console.log('Processed Data:', processedData);
    } catch (error) {
        console.error('An error occurred:', error);
    }
}

main();

Dengan memisahkan kebimbangan mengambil dan memproses data ke dalam fungsi mereka sendiri, kod anda menjadi lebih mudah dibaca dan diselenggara.

Mengendalikan Ralat dengan Anggun

Satu cabaran utama dengan kod tak segerak ialah pengendalian ralat. Dalam struktur panggil balik yang bersarang dalam, mungkin sukar untuk menangkap dan mengendalikan ralat dengan betul. Dengan Promises, anda boleh merantai .catch() pada penghujung operasi anda. Walau bagaimanapun, async/tunggu digabungkan dengan blok cuba-tangkap menyediakan cara yang lebih semula jadi dan boleh dibaca untuk mengendalikan ralat.

Contoh:

async function riskyOperation() {
    try {
        const result = await someAsyncTask();
        console.log('Result:', result);
    } catch (error) {
        console.error('Something went wrong:', error);
    }
}

riskyOperation();

Dengan cara ini, anda boleh menangkap ralat dalam bahagian tertentu kod async anda, memastikannya jelas dan terurus serta memastikan tiada ralat terlepas tanpa disedari.

Menguruskan Berbilang Operasi Asynchronous

Kadangkala anda perlu mengurus berbilang operasi async serentak. Walaupun Promise.all() biasanya digunakan, ia menghentikan pelaksanaan apabila satu Promise gagal. Dalam kes sedemikian, Promise.allSettled() datang untuk menyelamatkan—ia menunggu semua Promise diselesaikan (sama ada menyelesaikan atau menolak) dan mengembalikan keputusannya.

Contoh:

// Callback hell example:
doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

// Using Promises:
doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Gunakan Pekerja Web untuk Mengangkat Berat

Untuk tugasan yang intensif CPU, seperti pemprosesan imej atau penyusutan data, sifat satu-benang JavaScript boleh menyebabkan aplikasi anda membeku. Di sinilah Pekerja Web bersinar—mereka membenarkan anda menjalankan tugas di latar belakang tanpa menyekat urutan utama, memastikan UI responsif.

Contoh:

async function handleAsyncTasks() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error('Error:', error);
    }
}

handleAsyncTasks();

Dengan memunggah tugas berat kepada Pekerja Web, urutan utama anda kekal bebas untuk mengendalikan interaksi UI dan fungsi kritikal lain, memastikan pengalaman pengguna yang lebih lancar.

Memandangkan semua ini

Mengelakkan panggilan balik neraka dan menulis JavaScript tak segerak yang lebih bersih adalah tentang menjadikan kod anda lebih mudah dibaca, diselenggara dan cekap. Sama ada anda menggunakan Promises, tidak segerak/menunggu, memodulasi kod anda atau memanfaatkan Pekerja Web, matlamatnya adalah sama: pastikan kod anda rata dan teratur. Apabila anda berbuat demikian, anda bukan sahaja akan menyelamatkan diri anda daripada menyahpepijat mimpi ngeri, tetapi anda juga akan menulis kod yang orang lain (atau masa depan anda!) akan berterima kasih kepada anda.

---

Tapak Web Saya: https://Shafayet.zya.me

---

Meme untuk anda?

Atas ialah kandungan terperinci The Callback Hell, Menulis Cleaner Asynchronous JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!