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
AJAX
By ikhsanalatsary
AJAX
- 61
