Setelah mempelajari callback function, kamu mungkin mulai menyadari bahwa struktur kode bisa menjadi rumit jika callback digunakan secara bertingkat. Inilah yang disebut sebagai callback hell.
Untuk mengatasi hal tersebut, JavaScript memperkenalkan fitur bernama Promise yang menjadi cara modern dalam menangani proses asynchronous.
🔍 Apa Itu Promise?
Promise adalah objek di JavaScript yang merepresentasikan hasil akhir dari operasi asynchronous, yang bisa:
- Berhasil (fulfilled)
- Gagal (rejected)
- Atau masih dalam proses (pending)
Dengan Promise, kamu bisa menulis kode asynchronous yang:
- Lebih bersih
- Lebih mudah dibaca
- Lebih mudah ditangani ketika terjadi error
🧠 Contoh Penggunaan Promise
1const janji = new Promise((resolve, reject) => {
2 const success = true;
3
4 if (success) {
5 resolve("Berhasil!");
6 } else {
7 reject("Gagal!");
8 }
9});
10
11janji
12 .then((hasil) => {
13 console.log(hasil); // "Berhasil!"
14 })
15 .catch((error) => {
16 console.error(error);
17 });
18
1const janji = new Promise((resolve, reject) => {
2 const success = true;
3
4 if (success) {
5 resolve("Berhasil!");
6 } else {
7 reject("Gagal!");
8 }
9});
10
11janji
12 .then((hasil) => {
13 console.log(hasil); // "Berhasil!"
14 })
15 .catch((error) => {
16 console.error(error);
17 });
18
📘 Penjelasan:
resolve() dipanggil jika proses berhasilreject() dipanggil jika gagalthen() menangani hasil jika suksescatch() menangani error jika gagal
⏱ Contoh dengan Proses Asynchronous
1function ambilData() {
2 return new Promise((resolve, reject) => {
3 setTimeout(() => {
4 const data = { nama: "Rizki" };
5 resolve(data);
6 }, 2000);
7 });
8}
9
10ambilData()
11 .then((data) => {
12 console.log("Data diterima:", data);
13 })
14 .catch((err) => {
15 console.error("Terjadi kesalahan:", err);
16 });
17
1function ambilData() {
2 return new Promise((resolve, reject) => {
3 setTimeout(() => {
4 const data = { nama: "Rizki" };
5 resolve(data);
6 }, 2000);
7 });
8}
9
10ambilData()
11 .then((data) => {
12 console.log("Data diterima:", data);
13 })
14 .catch((err) => {
15 console.error("Terjadi kesalahan:", err);
16 });
17
📝 Output setelah 2 detik:
1Data diterima: { nama: "Rizki" }
2
1Data diterima: { nama: "Rizki" }
2
🧩 Chain Promise (Menjalankan Secara Berurutan)
1function tambahSatu(angka) {
2 return new Promise((resolve) => {
3 resolve(angka + 1);
4 });
5}
6
7tambahSatu(5)
8 .then(tambahSatu) // 6
9 .then(tambahSatu) // 7
10 .then((hasil) => {
11 console.log("Hasil akhir:", hasil); // 7
12 });
13
1function tambahSatu(angka) {
2 return new Promise((resolve) => {
3 resolve(angka + 1);
4 });
5}
6
7tambahSatu(5)
8 .then(tambahSatu) // 6
9 .then(tambahSatu) // 7
10 .then((hasil) => {
11 console.log("Hasil akhir:", hasil); // 7
12 });
13
⚠️ Penanganan Error Lebih Baik
Salah satu kelebihan Promise adalah penanganan error global yang mudah dengan catch():
1ambilData()
2 .then((data) => {
3 throw new Error("Kesalahan pada data!");
4 })
5 .catch((err) => {
6 console.error("Error ditangani:", err.message);
7 });
8
1ambilData()
2 .then((data) => {
3 throw new Error("Kesalahan pada data!");
4 })
5 .catch((err) => {
6 console.error("Error ditangani:", err.message);
7 });
8
✨ Kesimpulan
Promise adalah solusi untuk menulis kode asynchronous yang lebih rapi dan tidak bersarang seperti callback. Dengan Promise, kamu bisa mengelola proses asynchronous dengan kontrol yang lebih baik, termasuk dalam penanganan error.
Langkah berikutnya dalam pemahaman asynchronous adalah mengenal async dan await, fitur sintaks modern JavaScript yang dibangun di atas Promise.