Javascript Async

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:

  • JavaScript Dasar
  • JavaScript Object Oriented Programming
  • JavaScript Modules
  • JavaScript Document Object Model
  • Belajar HTTP

01. Pengenalan Asynchronous

Apa itu Synchronous?
  • Program dalam JavaScript secara default akan dieksekusi baris per baris
  • Secara default, proses di JavaScript akan dieksekusi secara Synchronous, artinya baris selanjutnya akan dieksekusi setelah baris sebelumnya selesai dikerjakan
  • Proses Synchronous juga biasa disebut Blocking, karena harus menunggu tiap proses selesai, baru proses selanjutnya bisa dilakukan

Apa itu Asynchronous?
  • Walaupun secara default proses di JavaScript dieksekusi secara Synchronous, namun kita bisa membuatnya menjadi Asynchronous.
  • Berbeda dengan proses Synchronous, pada proses Asynchronous, JavaScript tidak akan menunggu proses tersebut selesai, melainkan JavaScript akan melanjutkan baris selanjutnya, tanpa harus menunggu proses Asynchronous selesai.
  • Proses Asynchronous juga biasa disebut Non-Blocking.

02. Callback

Apa itu Callback?
  • Callback, merupakan mekanisme untuk memanggil kembali kode yang ada di program dari proses Async
  • Callback biasanya dibuat dalam bentuk function as parameter, dan parameter function tersebut akan dieksekusi saat proses Async selesai
  • Dengan menggunakan Callback, program bisa menerima informasi yang dibutuhkan dari proses yang berjalan secara Async

Async Method
Ada banyak method Async yang terdapat di JavaScript, yang akan kita bahas kali ini adalah :
  • setTimeout(callback, timeInMilis), digunakan untuk menjalankan proses Async sekali dalam waktu tertentu.
  • setInterval(callback, timeInMilis), digunakan untuk menjalankan proses Async secara periodik dalam waktu tertentu.
Contoh: Set Timeout


Contoh: Set Interval

03. AJAX

Apa itu AJAX?
  • AJAX singkatan dari Asynchronous JavaScript and XML
  • AJAX biasanya digunakan untuk mengambil atau mengirim data ke URL lain
  • Untuk membuat AJAX, kita bisa menggunakan class XMLHttpRequest
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest 

Contoh: Membuat AJAX  

lihat Network > Fetch/XHR > Headers:


lihat Network > Fetch/XHR > Response:


04. Menerima Data di AJAX
  • AJAX biasanya digunakan untuk mengirim data ke Server atau menerima data dari Server
  • Tiap request AJAX yang dilakukan, biasanya kita ingin mendapat informasi response yang diberikan oleh Server
  • Kita tidak bisa langsung mengambil response AJAX, karena proses AJAX adalah Async, sehingga kita perlu menunggu sampai proses Async nya selesai.
  • Untuk mendapatkan informasi AJAX, kita bisa menggunakan AJAX Callback, yang akan dieksekusi setelah proses AJAX selesai
  • Untuk menambahkan AJAX Callback, kita bisa tambahkan pada event load
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event 
  • Dan untuk mengambil datanya dari server, kita bisa menggunakan property responseText


lihat Network:


lihat Network:


05. Response Status di AJAX
  • AJAX adalah proses komunikasi Client dan Server
  • Dalam komunikasi Client dan Server, kita tidak bisa selalu menganggap proses tersebut akan berjalan lancar.
  • Akan ada banyak hal-hal yang bisa mengganggu proses AJAX yang bisa menyebabkan error, seperti; koneksi internet bermasalah, error dari server, data dari client tidak valid, dan lain-lain.
  • Server biasanya akan mengirimkan HTTP Status Code yang sesuai dengan jenis response nya, seperti yang sudah dibahas di materi HTTP
  • Untuk mengetahui status response dari Server, kita bisa menggunakan property status
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status


lihat Network:


lihat Network:


06. State di AJAX 
  • AJAX memiliki tahapan state, dimana kita bisa mendapatkan banyak sekali state di Ajax menggunakan property readyState
  • Property readyState mengembalikan nilai number, dimana tiap number merupakan representasi dari statenya

Ready State Change di AJAX
  • Jika kita ingin mendengarkan perubahan yang terjadi pada state, kita bisa menggunakan event readystatechange
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange 


lihat console:


07. Hookbin
  • Sebelum kita melanjutkan belajar AJAX, kita perlu bantuan Server sebagai tujuan pengiriman data di AJAX
  • Kita akan menggunakan salah satu website yang gratis dan lumayan populer untuk menerima data AJAX yang kita kirim, yaitu Hookbin
  • Hookbin adalah aplikasi yang bisa digunakan untuk menerima request HTTP dan menyimpan datanya, dengan ini kita bisa menggunakan Hookbin untuk melihat detail dari data AJAX yang kita kirim
  • https://hookbin.com/ 

Alternatif Lain:
  • Jika teman-teman mendapat masalah ketika mengakses website Hookbin, ada banyak alternatif lain website seperti Hookbin, misalnya :
  • https://requestbin.net/ 
  • https://pipedream.com/requestbin 
  • https://beeceptor.com/ 

08. Mengirim Data dengan AJAX
  • Saat kita menggunakan AJAX, biasanya bukan hanya untuk mengambil data dari Server
  • Kadang kita juga ingin mengirim data dari Client ke Server, misalnya kita membaca semua data di Web Form, lalu mengirimkan ke Server menggunakan AJAX
  • Untuk melakukan ini, kita bisa menambahkan parameter data yang akan kita kirim pada method send() milik XMLHttpRequest
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send 


lihat Network Header:


lihat Network Payload:


lihat Network Response:


lihat Server:


09. URL Search Param
  • Selain format JSON, kadang saat mengirim data menggunakan AJAX, kita hanya mengirim dalam bentuk Query Parameter
  • Pada kasus ini, kita bisa saja mengubah url nya dengan menambahkan Query Parameter, namun ada cara yang lebih mudah, yaitu menggunakan object URLSearchParam
  • Kita bisa memanfaatkan object URLSearchParam sebelum membuat URL
  • https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams 


lihat Network Header:


lihat Network Payload:


lihat Network Response:


lihat Server:



10. Form Data dengan AJAX
  • Selain JSON dan Query Param, kadang kita juga mengirim Form Data dari Client ke Server menggunakan AJAX
  • Untuk kasus ini kita tetap bisa menggunakan URLSearchParam
  • Namun object URLSearchParam nya kita kirim di method send()

Contoh: Send Form  

lihat Network Header:



lihat Network Payload:



lihat Network Response:


lihat Server:


11. Upload File dengan AJAX
  • Selain menggunakan JSON, Query Param, Form, kadang kita butuh mengirim file ke Server
  • Untuk mengirim file ke Server, kita perlu menggunakan object Form Data, lalu kita perlu menambahkan object File ke dalam FormData tersebut
  • https://developer.mozilla.org/en-US/docs/Web/API/FormData 
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file 
  • https://developer.mozilla.org/en-US/docs/Web/API/File 
  • https://developer.mozilla.org/en-US/docs/Web/API/FileList 

Contoh: Mengirim file

lihat Network Header:



lihat Network Payload:



lihat Server:



12. Promise

Apa itu Promise?
  • Promise merupakan proxy untuk sebuah nilai di masa depan (Future) yang belum diketahui saat pembuatan Promise tersebut.
  • Biasa Promise digunakan sebagai proxy untuk proses Async.
  • Penggunaan Promise sangat mudah, dan lebih mirip dengan kode Synchronous.
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 

Promise State

Contoh: Membuat Promise
 

lihat console:


Note:
  • resolve dan rejected dari return promise merupakan sebuah function yaitu resolve() dan rejected()

13. Promise Method
  • Promise memiliki tiga method yang bisa kita gunakan 
  • then() untuk mendapatkan atau mengubah data ketika Promise sukses
  • catch() untuk mendapatkan data error ketika Promise gagal
  • finally() akan dieksekusi ketika terjadi sukses atau gagal pada Promise
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#instance_methods 
Note:
  • method then(), catch(), dan finally() datanya adalah promise.



lihat console dan halaman:


14. Promise Static Method
  • Promise juga memiliki beberapa static method
  • Promise.all() digunakan untuk mengeksekusi beberapa promise sekaligus dan menunggu semua hasil promise nya
  • Promise.any() digunakan untuk mengeksekusi beberapa promise sekaligus dan mengambil hasil promise paling cepat
  • Dan lain-lain
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#static_methods 

Contoh: get product

lihat Network:


Contoh: promise all

lihat Network:


lihat Console:



15. Fetch Api
  • Fetch API merupakan fitur baru sebagai alternatif AJAX
  • Saat menggunakan AJAX, kita perlu menggunakan Callback untuk menerima response atau data dari Server, sedangkan Fetch API sudah menggunakan Promise, sehingga penggunaan Fetch API lebih mudah dibandingkan AJAX
  • Hampir semua browser modern sekarang sudah mendukung menggunakan Fetch API
  • Apa yang bisa kita lakukan di AJAX, bisa juga kita lakukan di Fetch API
  • https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 

Request
  • Saat kita akan mengirim request menggunakan Fetch API, kita perlu membuat object Request
  • Hal ini menjadi lebih rapi dibandingkan menggunakan AJAX
  • Kita bisa membuat object Request, lalu dikirim menggunakan Fetch API
  • Dan saat membuat Request, kita bisa menentukan data yang ingin kita kirim
  • https://developer.mozilla.org/en-US/docs/Web/API/Request/Request 

Response
  • Hasil dari Fetch API adalah sebuah Promise
  • Promise tersebut berisikan object Response
  • Ada banyak property dan method pada object Response, kita bisa menggunakannya sesuai dengan yang kita butuhkan
  • https://developer.mozilla.org/en-US/docs/Web/API/Response 


lihat Network Headers:


lihat Network Payload:


lihat Network Response:



lihat Server:



16. Async Await

Async Await
  • Async Await adalah fitur di JavaScript yang digunakan untuk mempermudah proses pembuatan kode Promise.
  • Dengan menggunakan Async Await, kita bisa membuat kode Asynchronous dengan gaya Synchronous

Async
  • Async digunakan untuk menandakan bahwa Function tersebut adalah Async, dan mengembalikan Promise
  • Dengan menggunakan Async, kita tidak perlu membuat Promise secara manual lagi

Await
  • Await digunakan untuk mendapatkan value hasil dari Promise
  • Await hanya bisa digunakan dalam Async Function

Error Handler di Async Await
  • Saat kita menggunakan Promise, kita bisa menggunakan catch() ketika terjadi error
  • Bagaimana pada kasus Async Await?
  • Pada Async Await, kita bisa menggunakan try catch untuk melakukan penanganan error

Contoh: Async


Contoh: Await

17. Web Worker

Thread di Javascript
  • JavaScript adalah Single Thread (Single Proses), artinya walaupun proses yang kita buat adalah Async, tapi tetap akan dijalankan dalam Thread (Proses) yang sama.
  • Kemampuan satu Thread dalam mengelola beberapa pekerjaan, dinamakan Concurrent.
  • Kemampuan menjalankan beberapa Thread untuk mengelola satu atau lebih pekerjaan, dinamakan Paralel. 
  • Dan untuk membuat proses secara Paralel, kita bisa menggunakan Web Worker

Contoh: Proses Lambat (Slow) 

lihat Task Manager:


18. Web Worker
  • Web Worker adalah kemampuan yang untuk menjalankan proses di Thread yang berbeda dibanding Main Thread. 
  • Keuntungan menggunakan Web Worker adalah, jika terdapat proses yang membutuhkan waktu lama, Web kita tidak akan Freeze, karena proses tersebut bisa kita jalankan di Thread yang berbeda dari Main Thread (yang biasa digunakan oleh UI)
  • https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API 

Worker
  • Untuk menggunakan Web Worker API, kita bisa membuat object Worker
  • https://developer.mozilla.org/en-US/docs/Web/API/Worker 
  • Saat kita membuat object Worker, Worker tidak akan secara otomatis berjalan, melainkan kita perlu memberi perintah dengan cara mengirim pesan
  • Untuk mengirim pesan, kita bisa gunakan method postMessage()
  • Sedangkan untuk menerima balasan dari worker, kita bisa menggunakan event listener onmessage
  • Data yang diterima adalah object MessageEvent
  • https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent 


lihat Task Manager:


Source: Youtube Programmer Zaman Now