Pendahuluan
Dalam dunia pengembangan web modern, JavaScript telah menjadi bahasa yang sangat penting. Salah satu fitur kuat JavaScript adalah Promises. Promises menyediakan cara yang elegan dan terstruktur untuk menangani operasi asinkron, yang merupakan operasi yang tidak terjadi secara langsung dan membutuhkan waktu untuk selesai. Bayangkan seperti memesan makanan di restoran, Anda memberi pesanan, tetapi makanan Anda belum tersedia saat itu. Begitu makanan Anda siap, pelayan akan memberi tahu Anda. Promises bekerja dengan cara yang sama, mereka menjanjikan hasil dari operasi asinkron di masa depan.
Memahami Promises
Promises adalah objek yang mewakili hasil akhir dari sebuah operasi asinkron. Mereka dapat berada dalam tiga keadaan:
- Pending: Ini adalah keadaan awal Promise, di mana operasi asinkron masih berlangsung.
- Fulfilled: Operasi asinkron telah berhasil diselesaikan dan Promise memiliki nilai hasil yang valid.
- Rejected: Operasi asinkron mengalami kesalahan dan Promise memiliki alasan kesalahan.
Membuat Promises
Kita dapat membuat Promise dengan menggunakan fungsi Promise(). Fungsi ini menerima fungsi callback sebagai argumen, yang memiliki dua parameter: resolve dan reject. Fungsi resolve dipanggil ketika operasi asinkron berhasil diselesaikan, sedangkan fungsi reject dipanggil jika terjadi kesalahan.
const myPromise = new Promise((resolve, reject) => {
// Operasi asinkron
setTimeout(() => {
const data = "Data berhasil diambil";
resolve(data); // Menjalankan operasi berhasil
}, 2000); // Menunda selama 2 detik
});
// Menangani hasil Promise
myPromise
.then((data) => {
console.log("Data berhasil diterima:", data);
})
.catch((error) => {
console.error("Terjadi kesalahan:", error);
});
Kode di atas mensimulasikan operasi asinkron yang menunda 2 detik sebelum menyelesaikannya. Setelah 2 detik, fungsi resolve dipanggil dengan pesan "Data berhasil diambil". then() digunakan untuk menangani hasil yang sukses, sementara catch() menangani kesalahan.
Menangani Promise dengan .then() dan .catch()
.then()digunakan untuk menangani hasil yang sukses. Fungsi callback di dalamthen()akan dijalankan jika Promise berhasil diselesaikan..catch()digunakan untuk menangani kesalahan. Fungsi callback di dalamcatch()akan dijalankan jika Promise mengalami kegagalan.
myPromise.then((data) => {
console.log("Data berhasil diterima:", data);
return new Promise((resolve, reject) => {
// Operasi asinkron kedua
setTimeout(() => {
resolve("Data tambahan berhasil diambil");
}, 1000);
});
})
.then((data2) => {
console.log("Data tambahan diterima:", data2);
})
.catch((error) => {
console.error("Terjadi kesalahan:", error);
});
Contoh ini menunjukkan bagaimana then() dapat digunakan secara berantai untuk menangani operasi asinkron yang bergantung satu sama lain.
Promise.all() dan Promise.race()
- Promise.all(): Menggabungkan beberapa Promise dan menyelesaikan ketika semua Promise berhasil diselesaikan. Jika salah satu Promise gagal, seluruh Promise.all() akan gagal.
- Promise.race(): Menggabungkan beberapa Promise dan menyelesaikan ketika salah satu Promise pertama menyelesaikannya, baik berhasil maupun gagal.
const promise1 = new Promise((resolve) => {
setTimeout(() => {
resolve("Promise 1 berhasil");
}, 3000);
});
const promise2 = new Promise((resolve) => {
setTimeout(() => {
resolve("Promise 2 berhasil");
}, 2000);
});
// Promise.all()
Promise.all([promise1, promise2])
.then((results) => {
console.log("Semua Promise berhasil:", results);
})
.catch((error) => {
console.error("Terjadi kesalahan:", error);
});
// Promise.race()
Promise.race([promise1, promise2])
.then((result) => {
console.log("Promise pertama yang selesai:", result);
})
.catch((error) => {
console.error("Terjadi kesalahan:", error);
});
Async/Await
async/await adalah sintaks yang lebih mudah dibaca dan ditulis untuk bekerja dengan Promises. Kata kunci async menandakan bahwa fungsi tersebut mengembalikan Promise, sedangkan await digunakan untuk menunggu hasil Promise sebelum melanjutkan eksekusi kode.
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log("Data berhasil diambil:", data);
} catch (error) {
console.error("Terjadi kesalahan:", error);
}
}
fetchData();
Kesimpulan
Promises adalah konsep fundamental dalam JavaScript modern. Mereka memungkinkan kita untuk menangani operasi asinkron dengan mudah dan terstruktur. Dengan memahami Promises, kita dapat membangun aplikasi web yang lebih kompleks dan responsif.