JavaScript Promise

"I Promise a Result!"

"Producing code（生成コード）"は、時間がかかる可能性があるコードです。

"Consuming code（消費コード）"は、結果を待つ必要があるコードです。

Promiseは、生成コードと消費コードをリンクするJavaScriptオブジェクトです。

JavaScriptのPromiseオブジェクト

JavaScriptのPromiseオブジェクトは、生成コードと消費コードの呼び出しを含んでいます：

Promise文法

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（時間がかかる可能性があるコード）
  myResolve(); // 成功時
  myReject();  // エラー発生時
});
// "Consuming Code" （結果を待つ必要があるコード）
myPromise.then(
  function(value) { /* 成功時のコード */ },
  function(error) { /* エラー発生時のコード */ }
);

コードを実行して結果を得た場合、以下の2つのカールバックのうちの1つを呼び出すべきです：

結果 呼び出し
成功 myResolve(result value)
エラー発生 myReject(error object)

Promiseオブジェクト属性

JavaScriptのPromiseオブジェクトは以下の通りです：

  • Pending
  • Fulfilled
  • Rejected

Promiseオブジェクトは以下の2つの属性をサポートしています：state および result。

Promiseオブジェクトが"pending"（作業中）である場合、結果はundefinedです。

Promiseオブジェクトが"fulfilled"である場合、結果は値です。

Promiseオブジェクトが"rejected"である場合、結果はエラーオブジェクトです。

myPromise.state myPromise.result
"pending" undefined
"fulfilled" 結果値
"rejected" errorオブジェクト

Promiseの属性stateとresultにアクセスできません。

Promiseを処理するにはPromiseメソッドを使用する必要があります。

Promiseの使い方

以下はPromiseの使用方法です：

myPromise.then(
  function(value) { /* 成功時のコード */ },
  function(error) { /* エラーがある場合のコード */ }
);

Promise.then()は、成功時のコールバックと失敗時のコールバックの2つのパラメータを持っています。

どちらもオプションですので、成功または失敗にコールバックを追加できます。

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// コード生成（これには時間がかかるかもしれません）
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

実際に試してみてください

JavaScript Promise 例

Promiseの使用を示すために、前章のコールバック例を使用します：

  • タイムアウトを待つ
  • ファイルを待つ

タイムアウトを待つ

コールバックの使用例

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

実際に試してみてください

Promiseの使用例

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

実際に試してみてください

ファイルを待つ

コールバックの使用例

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

実際に試してみてください

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("ファイルが見つかりません");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

実際に試してみてください

ブラウザのサポート

ECMAScript 2015、もしくは ES6 として知られる、JavaScript Promise オブジェクトが導入されました。

以下の表は、Promise オブジェクトを完全にサポートする最初のブラウザバージョンを示しています：

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
2014 年 2 月 2015 年 7 月 2014 年 4 月 2014 年 9 月 2014 年 3 月