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.

function myDisplayer(string) {
  console.log(string)
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum); // jalankan callback setelah proses pertambahan selesai
}

myCalculator(5, 5, myDisplayer);

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

const janjiDitepati = new Promise(function(resolve, reject) {
  // Kerjakan proses disini

  resolve('response sukses'); // callback jika proses berhasil
});

// cara menggunakan promise
janjiDitepati.then(function(success) => {
   console.log("Sukses:", success)
}).catch(function(error) => {
   console.error("Error:", error)
})

const janjiDiingkari = new Promise(function(resolve, reject) {
  // Kerjakan proses disini

  reject('pesan error'); // callback jika proses gagal
});

// cara menggunakan promise
janjiDitepati.then(function(success) => {
   console.log("Sukses:", success)
}).catch(function(error) => {
   console.error("Error:", error)
})

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.

{
  userId: 1,
  id: 1,
  title: "delectus aut autem",
  completed: false
}

Async/Await

Sebenarnya fungsi Async/Await ini mirip dengan fungsi then  pada pembahasan promise sebelumnya. Secara umum penjelasan async/await ialah sebagai berikut:

1. Await hanya dapat digunakan di dalam blok function async.
2. Await berguna untuk menunda segala proses sampai callback resolve() pada promise di panggil.

Mari kita masuk ke contoh

const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
console.log("Sukses:", response)

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()

{
  userId: 1,
  id: 1,
  title: "delectus aut autem",
  completed: false
}

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:

async function getTodoDetail() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
    response = await response.json()
    console.log("Sukses:", response)
  } catch (error) {
    console.error("Error:", error);
  }
}
getTodoDetail()

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.