Promise JavaScript

"Saya janjikan hasil!"

"Producing code (kode produksi)" adalah kode yang memerlukan waktu

"Consuming code (kode konsumsi)" adalah kode yang harus menunggu hasil

Promise adalah objek JavaScript yang menghubungkan kode produksi dan kode konsumsi

Objek Promise JavaScript

Objek Promise JavaScript mengandung kode produksi dan pemanggilan kode konsumsi:

Sintaks Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (dapat memerlukan waktu)
  myResolve(); // saat berhasil
  myReject();  // saat terjadi kesalahan
});
// "Consuming Code" (harus menunggu janji yang diterima)
myPromise.then(
  function(value) { /* Kode saat berhasil */ },
  function(error) { /* Kode saat terjadi kesalahan */ }
);

Ketika eksekusi kode mendapatkan hasil, ia harus memanggil salah satu kembalian dua:

Hasil Panggil
Berhasil myResolve(nilai hasil)
Terjadi kesalahan myReject(objek error)

Atribut objek Promise

Objek Promise JavaScript dapat menjadi:

  • Menunggu
  • Diterima
  • Diterima

Objek Promise mendukung dua atribut:state dan result。

Ketika objek Promise "menunggu" (berkerja), hasilnya adalah tidak terdefinisi。

Ketika objek Promise "diterima", hasilnya adalah nilai.

Ketika objek Promise adalah "diterima", hasilnya adalah objek error。

myPromise.state myPromise.result
"menunggu" Tidak terdefinisi
"diterima" Nilai hasil
"diterima" Objek error

Anda tidak dapat mengakses atribut Promise state dan result。

Anda harus menggunakan metode Promise untuk menangani Promise。

Bagaimana cara menggunakan Promise

Berikut adalah cara penggunaan Promise:

myPromise.then(
  function(value) { /* kode jika sukses */ },
  function(error) { /* kode jika ada kesalahan */ }
);

Promise.then() memiliki dua parameter, yaitu callback sukses dan callback gagal.

Kedua-duanya adalah opsi, jadi Anda dapat menambahkan callback untuk sukses atau gagal.

Contoh

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Buat kode (ini mungkin memerlukan waktu sebelumnya)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Coba Sendiri

Contoh JavaScript Promise

Untuk menunjukkan penggunaan Promise, kita akan menggunakan contoh callback di bab sebelumnya:

  • Tunggu timeout
  • Tunggu file

Tunggu timeout

Contoh penggunaan callback

setTimeout(function() { myFunction("Saya Cinta Kamu !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Coba Sendiri

Contoh penggunaan Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("Saya Cinta Kamu !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Coba Sendiri

Tunggu file

Contoh penggunaan callback

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Coba Sendiri

Contoh penggunaan Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Coba Sendiri

Dukungan Browser

ECMAScript 2015, disebut juga ES6, memperkenalkan object Promise di JavaScript.

Tabel di bawah ini menunjukkan versi browser yang mendukung object Promise penuh:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Februari 2014 Juli 2015 April 2014 September 2014 Maret 2014