JavaScript - Promise & Async Await

Agenda

• Recall Nested Callback
• Promise
• Async / Await
• QnA
• Waktunya Tantangan

Recall Nested Callback

Mari kita coba lihat kode tentang nested callback ini

Intro Promise

Bagaimana perasaannya membuat callback?

Membagongkan bukan?

Apalagi pas nested callback khaque

Nah sekarang mari kita coba memperingan masalah dengan teknik baru !

Promise

• Merupakan teknik baru yang diperkenalkan dalam ES6 (Standard JavaScript tahun 2015)
• Diperkenalkan sebagai teknik abstraksi callback, untuk menghindari Callback Hell
• Promise adalah suatu konsep yang membuat program Berjanji untuk melakukan sesuatu yang tidak diketahui akan diselesaikan kapan

Promise (ii)

Promise merepresentasikan operasi atau aksi yang belum diselesaikan sekarang, tapi akan diselesaikan nanti di masa depan dan bersifat asynchronous.

Promise (iii)

Mari kita lihat kondisi Janji di dunia nyata

• Premis Janji: Saya tidak akan marah ketika menonton Layangan Putus
• Kondisi Janji diuji: Ketika saya menonton Layangan Putus
• Kondisi Janji terpenuhi: Ketika nonton tidak emosi
• Kondisi Janji ditolak: Ketika nonton emosi dan banting meja gara gara pelakor

Promise (iv)

Mari kita lihat Promise dalam ES6

Beberapa kondisi atau state dalam Promise:

• pending - Merupakan kondisi awal, ketika kita membuat Promise, belum terpenuhi / ditolak
• fulfilled - Merupakan kondisi di mana Promise sudah terpenuhi
• rejected - Merupakan kondisi di mana Promise gagal terpenuhi

Barulah sekarang kita masuk ...

Bagaimana cara membuat promise?

Deklarasi Promise

// Deklarasi Promise
const sebuahJanji = new Promise((resolve, reject) => {
  // Sebenarnya resolve dan reject ini adalah CALLBACK !
  // baik resolve dan reject ini hanya menerima satu parameter.

  // bila terjadi error (err)
  if("bila terjadi error") {
    // Kembalikan reject dengan error
    reject("message error yang ingin diberikan");
  }

  // bila success (fulfilled)
  // kembalikan resolve dengan nilai yang diharapkan (data)
  resolve("data kembalian sukses");
});

Deklarasi Promise (ii)

// Menggunakan promise berdasarkan kode yang dibuat sebelumnya
sebuahJanji
  // Apabila promise berhasil (resolved)
  .then(
    // masih ingat yah resolve("data kembalian sukses") 
    // resolve = fnCallback, "data kembalian sukses" = data
    (data) => {
      // lakukan logic ketika promise berhasil
    }
  )
  // Apabila promise gagal (rejected)
  .catch(
    // masih ingat yah reject("message error yang ingin diberikan")
    // reject = fnCallback, "message error yang ingin diberikan" = err
    (err) => {
      // lakukan logic ketika promise gagal
    }
  )

Deklarasi Promise (iii)

Mari kita lihat contoh penggunaan promise sederhana

const janjiPertamaKu = new Promise((resolve, reject) => {
  // Di sini karena tidak ada kondisi gagal, maka reject tidak digunakan
  setTimeout( () => {
    resolve("Hore Janjiku Berhasil !");
  }, 250);
});

// Cara pakai Promisenya
// Di sini tidak invoke, karena bukan fungsi
janjiPertamaKu
  // Apabila janji berhasil
  .then((dataHasilResolve) => {
    // Logic ketika janji berhasil
    console.log(dataHasilResolve);
  });
  // Karena tidak ada reject, jadi tidak perlu menggunakan catch

Deklarasi Promise (iv)

• Cara sebelumnya adalah cara sederhana untuk membuat Promise yang tidak bisa menerima parameter
• Sekarang pertanyaannya: Bagaimana bila promise mau menerima parameter?
• Inilah yang umum digunakan: Bungkus Promise dalam sebuah fungsi !

Deklarasi Promise (v)

Contoh deklarasi Promise dibungkus fungsi

// Mis: kita ingin membuat fungsi untuk menggabungkan kata yang diberikan
const gabungKata = (kataYangInginDigabung) => {
  // Hasil akhir dari fungsi ini adalah dengan 
  // mengembalikan Promise
  return new Promise((resolve, reject) => {
    // Kondisi gagal (rejected)
    if(kataYangInginDigabung === null) {
      reject("Maaf, katanya Error !");
    }
    // Kondisi terpenuhi (resolved)
    else {
      resolve(kataYangInginDigabung);
    }
  });
};

Deklarasi Promise (vi)

Contoh penggunaan Promise dibungkus fungsi

// Cara menggunakan fungsi gabungKata (Promise)
gabungKata("Hello")
  // Kondisi berhasil (resolved)
  .then(
    // fnCallback resolve
    (dataHasilResolve) => {
      console.log(dataHasilResolve);
    }
  )
  // Kondisi gagal (rejected)
  .catch(
    // fnCallback reject
    (rejectMessage) => {
      console.log(rejectMessage);
    }
  );

Promise Chaining

Masih belum terlihat yah enak-nya promise?

• Penyederhaan callback hell pada Promise menggunakan Promise Chaining
• Janji berantai yang diselesaikan berurutan
• Kita coba mengubah callback hell yang dapat dilihat di sini

Mari kita coba lihat kode Promise yang berlapis

Promise Chaining

Mari kita coba selesaikan masalah tersebut dengan Promise

Kode untuk promise chaining dapat dilihat di sini

Promise Chaining (ii)

Kok sepertinya... itu seperti callback hell yah?

Karena kita menggunakannya salah, terjadilah Promise Hell

Lalu solusinya bagaimana?

Promise Chaining (iii)

Mari kita coba lihat kode berikut yah di sini

Promise Chaining (iv)

Kok sepertinya... masih ada yang aneh yah?

Promise yang di-return bisa langsung masuk ke .then()

Fungsi gabungKata sudah Promise ... jadi seharusnya bisa seperti ...

Promise Chaining (v)

Mari kita coba lihat kode penyelesaiannya berikut yah di sini

Promise Chaining (vi)

Wah jadinya pendek !

• Promise Chaining yang benar akan membuat kode menjadi lebih sederhana daripada callback
• Kode dapat lebih mudah terbaca karena alurnya se-akan-akan terjadi secara berurutan, sehingga alur dari kode akan lebih mudah dibaca dan dicari kesalahan kode ada dimana

Async / Await

Psst... ternyata ada loh yang lebih pendek lagi dari Promise, namanya adalah async / await

• Merupakan pengembangan lanjutan dari Promise
• Backward Compatible dengan Promise
• (Apapun yang ditulis dengan Promise bisa dijadikan async / await)

Async / Await (ii)

Mari kita lihat cara penulisannya dengan melihat kode fs Promises dan versi async / awaitnya di sini

Async / Await (iii)

Setelah melihat cara penulisannya, mari kita selesaikan permasalahan gabungKata dengan versi async / await

Yuk lihat kodenya di sini

Async / Await (iv)

Jadi sependek itu !?

Pembelajaran hari ini: Pergunakan cara async / await sebisa mungkin !

QnA

Waktunya Tantangan

Referensi

• https://web.dev/promises/
• https://javascript.info/async-await
• https://github.com/withered-flowers/education-promise