AJAX

AJAX

Asynchronous JavaScript And XML

sebuah teknologi yang di tambahkan ke JavaScript

AJAX

  • Make requests to the server without reloading the page
  • Request data from a server - after the page has loaded
  • Receive data from a server  - after the page has loaded
  • Send data to a server - in the background

AJAX APIs

  • XMLHttpRequest
  • Fetch

 JSON 

HTTP Verbs

  • GET
  • POST
  • PUT
  • DELETE
  • PATCH

apa yang terjadi saat pertama kali buka menjalankan alamat url pada browser?

Promise

Object yang merupakan penyelesaian akhir, bisa sukses dan bisa gagal dari proses Asyncronous.

Analogi

  • Ayah Budi menyuruh Budi untuk membeli makanan A

  • kemudian Budi menjawab "baik Ayah!"

  • Namun sebelumnya Ayah Budi berkata: Budi ketika kamu membeli makanan aku akan menyiapkan piring dan sendok. Dan pastikan kamu membeli makanan A itu.

  • Budi menjawab: Apabila ada hal tak terduga?

  • Ayah Budi: Jika kau mendapatkannya kirim aku sebuah pesan WA, jika makanan tersebut tidak ada / kamu tidak mendapatkannya maka telpon aku segera. 

Promise Contructor

new Promise( /* executor */ function(resolve, reject) { ... } );

Promise Contructor

var adamakananA = "mcD paket panas"

var promise1 = new Promise(function(resolve, reject) {
  // butuh waktu untuk beli makanan A
  setTimeout(function() {
    if (adamakananA) {
        resolve('Ayah, Aku sudah membeli makanannya!');
    } else {
        reject('Riing, Ayah uangnya jatuh di jalan!');
    }
  }, 300);
});

promise1.then(function success(value) {
  console.log(value);
}, function failed(error) {
  console.log(error);
});

console.log(promise1);
promise.then(onFulfilled, onRejected);

Then

optional callback function yang hanya menerima/ terpanggil bila hasil sukses

optional callback function yang hanya menerima/ terpanggil bila hasil gagal

Promise state

  • Pertama kali di buat / diinisialisasi, statusnya adalah pending.
  • ketika menerima status sukses(fulfilled) maka di thenable melalui `then` pada function(parameter pertama) terpanggil. 
  • ketika menerima status gagal(failed) maka di thenable melalui `then` pada function(parameter kedua) terpanggil.

thenable and chaining

catch

catch(allRejected);

Optional callback function yang terpanggil apabila ada exception / error

fetch API

Using Others:

  • Axios

Syntax Sugar

Async...await

Made with Slides.com