Callback dan Callback Hell
Pahami proses asinkron berbasis callback, kenali masalah nesting yang disebut callback hell, dan lihat alasan Promise diperkenalkan untuk mengatasinya.
Callback dan Callback Hell adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Fungsi Panggilan Balik?
Fungsi panggilan balik adalah fungsi yang diteruskan sebagai argumen ke fungsi lain untuk dipanggil nanti, setelah suatu pekerjaan selesai. Fungsi panggilan balik merupakan pola asinkron asli JavaScript — pola ini sudah ada sebelum Promise.
// Synchronous callback:
[1, 2, 3].forEach(function(n) {
console.log(n);
});
// Async callback:
setTimeout(function() {
console.log('1 second later');
}, 1000);Fungsi Panggilan Balik dengan Kesalahan sebagai Argumen Pertama di Node.js
Node.js menstandarkan sebuah konvensi: fungsi panggilan balik menerima kesalahan sebagai argumen pertama dan hasil sebagai argumen kedua. Jika argumen kesalahan bernilai null atau undefined, operasi berhasil.
fs.readFile('data.json', 'utf8', function(err, data) {
if (err) {
console.error('Failed to read file:', err);
return;
}
console.log('File contents:', data);
});Langkah Asinkron dengan Fungsi Panggilan Balik
Ketika satu operasi asinkron bergantung pada hasil operasi lain, Anda menyusun fungsi-fungsi panggilan balik secara bersarang. Tiga langkah berurutan saja sudah mulai terlihat rumit.
getUser(userId, function(err, user) {
if (err) return handleError(err);
getOrders(user.id, function(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, function(err, invoice) {
if (err) return handleError(err);
// Finally use invoice
renderInvoice(invoice);
});
});
});Neraka Panggilan Balik — Piramida Kehancuran
Penyusunan bersarang yang dalam disebut neraka panggilan balik atau piramida kehancuran. Masalahnya: kode bergeser ke kanan pada setiap tingkat, penanganan kesalahan berulang, alurnya sulit diikuti, dan pemfaktoran ulang menjadi menyakitkan.
Mengatasi: Fungsi Bernama
1) Penanganan kesalahan memerlukan pemeriksaan kesalahan eksplisit di setiap tingkat. 2) Penelusuran kesalahan sulit — jejak tumpukan tidak menunjukkan rantai logisnya. 3) Kode sulit dibaca dalam lapisan-lapisan horizontal. 4) Kesalahan mudah terlewat secara tidak sengaja.
Mengatasi: Fungsi Bernama
Ekstrak fungsi panggilan balik yang bersarang menjadi fungsi bernama tingkat atas. Cara ini meratakan penyusunan bersarang dan membuat setiap langkah dapat diuji secara terpisah — tetapi tidak menyelesaikan masalah koordinasi yang mendasar.
function onInvoice(err, invoice) {
if (err) return handleError(err);
renderInvoice(invoice);
}
function onOrders(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
if (err) return handleError(err);
getOrders(user.id, onOrders);
}
getUser(userId, onUser);Pustaka Alur Kendali (Historis)
Pustaka seperti async.js menyediakan pembantu (async.waterfall, async.parallel) untuk mengelola alur berbasis fungsi panggilan balik. Pustaka tersebut merupakan standar terbaik sebelum Promise hadir di ES2015.
Mengapa Fungsi Panggilan Balik Tidak Akan Hilang
Fungsi panggilan balik masih muncul di mana-mana: pendengar peristiwa, metode array, setTimeout, dan API aliran semuanya menggunakannya. Intinya, untuk pengurutan asinkron, Promise dan async/await lebih unggul. Fungsi panggilan balik untuk peristiwa sederhana yang hanya terjadi sekali tetap sesuai.
Fungsi Panggilan Balik ke Promise: Promisifikasi
util.promisify() milik Node.js membungkus fungsi panggilan balik dengan kesalahan sebagai argumen pertama menjadi versi yang mengembalikan Promise. Cara ini menjembatani API lama dengan kode asinkron/await modern.
const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);
async function readConfig() {
const data = await readFile('config.json', 'utf8');
return JSON.parse(data);
}Saat Fungsi Panggilan Balik Masih Menjadi Pilihan Tepat
Pendengar peristiwa (addEventListener) mengharapkan fungsi panggilan balik, dan itu wajar — pendengar tersebut dapat dipanggil berkali-kali. Penangan data aliran juga mengharapkan fungsi panggilan balik. Promise adalah hasil asinkron satu kali; fungsi panggilan balik adalah langganan untuk banyak peristiwa.
Langkah Berikutnya: Promise dan async/await
Promise yang diperkenalkan di ES2015 dan async/await di ES2017 menyelesaikan neraka panggilan balik. Kode JavaScript modern hampir selalu menggunakan async/await untuk operasi asinkron berurutan. Memahami fungsi panggilan balik tetap penting untuk membaca kode lama dan bagian internal pustaka.
Pemeriksaan Singkat
Apa masalah utama yang dijelaskan oleh istilah 'neraka panggilan balik'?
Ringkasan: Fungsi Panggilan Balik
Fungsi panggilan balik adalah fungsi yang diteruskan ke fungsi lain untuk dipanggil nanti. Ini merupakan pola asinkron asli. Fungsi panggilan balik dengan kesalahan sebagai argumen pertama (err, result) adalah konvensi Node.js. Penyusunan bersarang yang dalam menciptakan neraka panggilan balik. Ekstrak fungsi bernama untuk meratakannya. Gunakan Promise/async/await untuk alur asinkron berurutan. Fungsi panggilan balik tetap sesuai untuk pendengar peristiwa dan aliran.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Callback dan Callback Hell” gratis?
Ya — teks lengkap “Callback dan Callback Hell” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Callback dan Callback Hell”?
Pahami proses asinkron berbasis callback, kenali masalah nesting yang disebut callback hell, dan lihat alasan Promise diperkenalkan untuk mengatasinya. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Callback dan Callback Hell” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Event Loop: Call Stack, Queue, Microtask
- Callback dan Callback Hell
- Promise: then, catch, finally, Promise.all
- async/await dan Penanganan Error