JavaScript Async

"async and await make promises easier to write"

async memaksa fungsi mengembalikan Promise

await memaksa fungsi menunggu Promise

Syarat Async

kata kunci sebelum fungsi async memaksa fungsi mengembalikan promise:

contoh

async function myFunction() {
  kembalikan "Hello";
}

ekuivalen dengan:

async function myFunction() {
  kembalikan Promise.resolve("Hello");
}

Berikut adalah metode yang digunakan dengan Promise:

myFunction().then(
  function(value) { /* Kode saat sukses */ },
  function(error) { /* Kode saat terjadi kesalahan */ }
);

contoh

async function myFunction() {
  kembalikan "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Coba Sendiri

atau lebih mudah, karena Anda mengharapkan nilai normal (respon normal, bukan kesalahan):

contoh

async function myFunction() {
  kembalikan "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);

Coba Sendiri

Syarat Await

kata kunci sebelum fungsi await memaksa fungsi menunggu promise:

let value = await promise;

await kata kunci hanya dapat async dalam fungsi

contoh

biar kita belajar perlahan-lahan bagaimana menggunakannya.

gramatika dasar

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("Saya mencintai kamu !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Coba Sendiri

menunggu batas waktu

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("Saya mencintai kamu !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

Coba Sendiri

menunggu berkas

async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("File not Found");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

Coba Sendiri

Dukungan Browser

ECMAScript 2017 memperkenalkan kata kunci JavaScript async dan await.

Tabel di bawah ini menunjukkan versi browser yang pertama yang mendukung keduanya sepenuhnya:

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Desember 2016 April 2017 Maret 2017 September 2017 Desember 2016