Penjelasan Lengkap Tentang Callback, Promise dan Async/Await
Kalian yang lagi menggunakan atau mempelajari javascript pasti gak asing dengan Callback, Promise dan Async/Await. Pasti kebanyakan kalian masih bingung dengan semua ini, nah itulah tujuan saya membuat artikel ini semoga dengan artikel ini bisa menghilangkan kebingungan atau minimal mengurangi kebingungan kalian.
Callback
Mari kita mulai dengan callback, callback adalah sebuah fungsi yang ada di dalam fungsi lain yang didalamnya memiliki perintah, biasa callback digunakan untuk memanggil fungsi lain/fungsi turunan ketika fungsi utama selesai di eksekusi, pasti masih bingung kan yok kita langsung ke contoh.
setTimeout(()=>{
console.log('do it now'); // callback
},2000);
Ketika script diatas dijalankan maka akan mengeksekusi console.log(do it now) setelah 2000 milisecond/2 detik. Nah bagian ini lah disebut callback. Masih belum paham? mari kita ke contoh berikutnya.
Paham mengenai callback akan sangat berguna sebelum kalian belajar tentang promise.
Promise
Nah ini pasti sering dengar juga, promise ini dalam bahasa indonesia bermakna janji, kita bisa analogikan promise ini dengan janji. Misal kita janji dengan seseorang maka akan ada dua kemungkinan apakah janji itu ditepati/sukses atau diingkari/gagal. Kurang lebih seperti itulah cara kerja promise di javascript, mari kita masuk ke contoh.
const janji = new Promise(function(resolve, reject) {
// Kerjakan proses disini
// promise memiliki 2 jenis callback
resolve('Sukses'); // callback jika proses berhasil
reject('Error'); // callback jika proses gagal
});
Cara Menggunakan Promise
Promise biasa digunakan untuk menghandle proses asinkronus (async), contohnya proses AJAX. Berikut contoh kasus penggunaan promise.
fetch("https://jsonplaceholder.typicode.com/todos/1").then(function(response) {
console.log("Sukses:", response)
}).catch(function(error) {
console.error("Error:", error)
})
Proses diatas adalah proses pengambilan data API menggunakan fetch, jika proses pengambilan data berhasil maka akan masuk ke block function then dan sebaliknya jika gagal akan masuk ke block function catch.
Tambahan
fetch("https://jsonplaceholder.typicode.com/todos/1").then(function(response) {
response.json().then(function(responseJson) {
console.log("Sukses:", responseJson)
}).catch(function(error) {
console.error("Error:", error)
})
}).catch(function(error) {
console.error("Error:", error)
})
Secara default reponse dari fetch berupa Object Response, kita perlu menggunakan method .json() untuk mengubah response menjadi bentuk json.
Async/Await
Sebenarnya fungsi Async/Await ini mirip dengan fungsi then pada pembahasan promise sebelumnya. Secara umum penjelasan async/await ialah sebagai berikut:
- Await hanya dapat digunakan di dalam blok function async.
- Await berguna untuk menunda segala proses sampai callback resolve() pada promise di panggil.
Mari kita masuk ke contoh
Contoh diatas akan menghasilkan output error: await is only valid in async functions and the top level bodies of modules. Ingat poin 1 pada penjelasan sebelumnya bahwa await hanya dapat di eksekusi di dalam function async.
async function getTodoDetail() {
let response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
response = await response.json()
console.log("Sukses:", response)
}
getTodoDetail()
Tambahan
Pada code diatas adalah contoh ketika proses pengambilan data berhasil, timbul pertanyaan baru gimana untuk menghandle ketika proses promise(dalam kasus diatas fetch) gagal?
Jika kita menggunakan promise tanpa async/await dapat menggunakan function catch untuk menghandle proses yang error/gagal, di async/await kita dapat menggunakan try...catch. Berikut contohnya:
Kesimpulan
Callback, Promise dan Async saling berhubungan dan sangat penting memahami ketiganya, dan ada baiknya sebelumnya kalian juga sudah paham tentang konsep async dan sync pada javascript.
Silahkan Login/Sign Up
😞 Discord eklusif buat member asinkron.com
Jangan khawatir silahkan Daftar GRATIS 😎
*Link discord akan dikirim ke email yang anda gunakan untuk mendaftar.