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("ファイルが見つかりません");}
    };
    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月