JavaScript Async

"async and await make promises easier to write"

async 使函數返回 Promise

await 使函數等待 Promise

Async 語法

函數前的關鍵字 async 使函數返回 promise：

實例

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

等同于：

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

以下是使用 Promise 的方法：

myFunction().then(
  function(value) { /* 成功時的代碼 */ },
  function(error) { /* 出錯時的代碼 */ }
);

實例

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

親自試一試

或者更簡單，因為您期望正常值（正常響應，而不是錯誤）：

實例

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

親自試一試

Await 語法

函數前的關鍵字 await 使函數等待 promise：

let value = await promise;

await 關鍵字只能在 async 函數中使用。

實例

讓我們慢慢來學習如何使用它。

基礎語法

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

親自試一試

等待超時

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

親自試一試

等待文件

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 月