JavaScript Async

"async and await make promises easier to write"

async membuat fungsi mengembalikan Promise

await membuat fungsi menunggu Promise

AwalAsync

kata kunci sebelum fungsi async membuat fungsi mengembalikan promise:

contoh

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

sama dengan:

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

Berikut adalah cara-cara untuk menggunakan Promise:

myFunction().then(
  function(value) { /* Kod yang akan dijalankan bila berjaya */ },
  function(error) { /* Kod yang akan dijalankan bila terjadi kesalahan */ }
);

contoh

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

亲自试一试

atau lebih mudah, kerana anda mengharapkan nilai normal (respons normal, bukannya kesalahan):

contoh

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

亲自试一试

Awalawait

kata kunci sebelum fungsi await membuat fungsi menunggu promise:

let value = await promise;

await kata kunci hanya boleh async dalam fungsi.

contoh

biar kami pelajari perlahan bagaimana menggunakannya.

gramata dasar

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

亲自试一试

menunggu lepas masa

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

亲自试一试

menunggu fail

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();

亲自试一试

浏览器支持

ECMAScript 2017 引入了 JavaScript 关键字 async 和 await。

下表注明了首个完全支持两者的浏览器版本：

Chrome IE Firefox Safari Opera
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
2016 年 12 月 2017 年 4 月 2017 年 3 月 2017 年 9 月 2016 年 12 月