Javascript Synchronous dan Asynchronous

Kode yang dieksekusi secara berurutan dinamakan dengan Synchronous code execution. Pada contoh pada artikel sebelumnya kita menggunakan Synchronous code execution.

Kode yang dieksekusi tanpa menunggu urutan dinamakan Asynchronous code execution, Sebuah kode yang dijalankan secara Asynchronous akan membiarkan kode di bawahnya juga berjalan sehingga kode bisa berjalan bersamaan.

Berbeda dari bahasa pemrograman lain yang mendukung Asynchronous secara native (dengan membuat thread atau proses baru yang bisa berjalan bersamaan dengan main thread), Javascript adalah bahasa pemrograman single-threaded. Agar bisa mirip dengan Asynchronous, Javascript menggunakan teknik Event Driven code execution yang berarti setiap fungsi bekerja ketika suatu event terjadi.

Beberapa contoh event yang ada di browser :

  • onchange terjadi saat elemen HTML mengalami perubahan
  • onclick terjadi saat elemen HTML diklik
  • onmouseover terjadi saat elemen HTML mengalami hover
  • onmouseout terjadi saat kursor keluar dari elemen HTML
  • onkeydown terjadi saat user menekan tombol di keyboard
  • onload terjadi saat browser selesai memuat semua elemen HTML

Event browser yang bisa digunakan di javascript bisa dilihat selengkapnya di sini.

Kode Asynchronous dapat dibuat menggunakan Promise dan Async/Await.

Glot.io IDE memudahkan kita untuk mencoba jalankan kode Javascript murni

Promise

Promise pada Javascript analoginya seperti perjanjian, sebuah perjanjian yang baru dibuat akan memiliki status awal menunggu sampai terjadi suatu kejadian (event) yang membuatnya terselesaikan (resolved) atau tidak terpenuhi (rejected).

Sebuah Promise memiliki 3 status berikut ini

  • Tertunda (pending): keadaan awal, kode di dalam Promise akan terus dijalankan hingga callback resolve atau reject terpanggil
  • Terpenuhi (resolved): janji berhasil diselesaikan, ditandai dengan terpanggilnya callback function resolve
  • Tertolak (rejected): janji tidak bisa terpenuhi, ditandai dengan terpanggilnya callback function reject

Berikut ini contoh beberapa Promise:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const ifResolved = (pesan) => {
  console.log(`Terpenuhi karena ${pesan}`)
}
const ifRejected = (err) => {
  console.log(`Tidak terpenuhi karena ${err}`)
}

const myPromise = new Promise((resolve, reject) => {
  let x = 10
  if (x <= 10) {
    resolve("Nilai kurang dari atau sama dengan 10")
  }
  reject("Nilai lebih dari 10")
}).then(ifResolved, ifRejected)
// callback function ifResolved akan terpanggil jika status promise resolved
// callback function ifRejected akan terpanggil jika status promise rejected
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// then dan catch pada Promise memudahkan kita untuk membaca kode
// method then hanya diisi dengan callback function ketika sukses
// method catch hanya diisi dengan callback function ketika gagal

const myPromise = new Promise((resolve, reject) => {
  let x = 12
  if (x <= 10) {
    resolve("Nilai kurang dari atau sama dengan 10")
  }
  reject("Nilai lebih dari 10")
})
  .then((pesan) => {
    console.log(`Terpenuhi karena ${pesan}`)
  })
  .catch((err) => {
    console.log(`Tidak terpenuhi karena ${err}`)
  })
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Kode dalam Promise terkadang bisa error tanpa sempat memanggil callback reject
// error ini biasa ditampilkan dengan sintaks throw
// fungsi catch akan tetap menangkap nilai yang dikirimkan melalui throw
// meskipun callback reject tidak dipanggil

const myPromise = new Promise((resolve) => {
  let x = 12
  if (x <= 10) {
    resolve("Nilai kurang dari atau sama dengan 10")
  }
  throw Error("Nilai lebih dari 10")
})
  .then((pesan) => {
    console.log(`Terpenuhi karena ${pesan}`)
  })
  .catch((err) => {
    console.log(`Tidak terpenuhi karena ${err}`)
  })

Promises Chaining

Promises Chaining adalah rangkaian dari Promise dengan menggunakan method then, catch, dan finally. Promises chaining bisa dikatakan sebagai sinkronisasi kode asinkron.

Agar lebih mudah dipahami, kita buat dulu sebuah alur data promises seperti berikut ini:

  1. Dapatkan data teks status covid19 dari internet menggunakan Web API fetch
  2. Ubah data tersebut menjadi Object Javascript dengan JSON (Javascript Object Notation)
  3. Tampilkan data object tersebut pada console
  4. Jika terjadi error, tampilkan error pada console

Dari urutan di atas, didapatkanlah Promises chaining seperti berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// Fetch data dari covid19
window
  .fetch("https://covid19.mathdro.id/api")
  .then((data) => data.json()) // Kemudian ubah data menjadi Object dengan json
  .then((obj) => {
    console.log(obj) // tampilkan obj ke console
  })
  .catch((err) => {
    console.log(err) // tampilkan error jika salah satu Promise gagal terpenuhi
  })
console.log("Pengambilan data covid 19")
/**
 * Output:
 * Pengambilan data covid 19
 * {
 * confirmed: {...},
 * recovered: {...},
 * ..dan-seterusnya..
 * }
 */

Dari output kode di atas dapat diketahui bahwa:

  • console.log paling bawah bersifat sinkron dan tidak menunggu selesainya window.fetch yang asinkron
  • method then() dan catch() hanya terpanggil setelah Promise sebelumnya selesai (resolved ataupun rejected)

Async

async function adalah fitur baru dari javascript yang ditambahkan pada tahun 2017. Sebelumnya kita telah belajar menulis kode asynchronous dengan menggunakan Promise, nah Async function adalah cara mudah untuk menjadikan fungsi apapun menjadi Promise dengan hanya menambah keyword async.

Perhatikan contoh kode asynchronous Javascript menggunakan Promise dan Async berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// buat sebuah promise
const myPromise = new Promise((resolve, reject) => {
  let x = 10
  if (x <= 10) {
    // Perlu menggunakan resolve
    // untuk memberi tanda bahwa Promise terselesaikan
    resolve("Nilai kurang dari atau sama dengan 10")
  }
  throw Error("Nilai lebih dari 10")
})

// Penanganan Promise menggunakan method then dan catch
// method finally juga bisa dipakai jika dibutuhkan
myPromise
  .then((pesan) => {
    console.log(pesan)
  })
  .catch((err) => {
    console.log(err)
  })
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// buat sebuah async function
const myAsync = async function () {
  let x = 10
  if (x <= 10) {
    // Tidak perlu menggunakan resolve, cukup return
    // untuk memberi tanda bahwa async function selesai
    return "Nilai kurang dari atau sama dengan 10"
  }
  throw Error("Nilai lebih dari 10")
}

// Karena Async function menghasilkan Promise
// maka kita bisa gunakan method then dan catch juga
myAsync()
  .then((pesan) => {
    console.log(pesan)
  })
  .catch((err) => {
    console.log(err)
  })

Dari contoh di atas dapat diketahui bahwa Async function ketika dipanggil akan menghasilkan Promise meski return value-nya berupa data sehingga method then dan catch juga bisa digunakan setelah pemanggilan async function.

Await

Operator await digunakan untuk menunggu Promise selesai (resolved), nilai yang didapatkan oleh await bisa berupa Promise maupun data biasa dalam bentuk resolved Promised. await hanya bisa digunakan di dalam sebuah async function.

Kita gunakan contoh dari Promises Chaining di atas untuk belajar Async Await:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
window
  .fetch("https://covid19.mathdro.id/api")
  .then((data) => data.json())
  .then((obj) => {
    console.log(obj)
  })
  .catch((err) => {
    console.log(err)
  })
console.log("Pengambilan data covid 19")
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const getData = async () => {
  let data = await window.fetch("https://covid19.mathdro.id/api")
  let obj = await data.json() // dijalankan hanya jika variabel data terisi
  console.log(obj) // dijalankan hanya jika variabel obj terisi
}

getData().catch((err) => {
  console.log(err)
})
console.log("Pengambilan data covid 19")

Dari contoh di atas, dapat diketahui bahwa penggunaan async dan await bisa mengurangi bahkan menghilangkan method then sehingga penulisan kode asynchronous menjadi lebih rapi dan bersih.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram