JavaScriptのPromise
「結果をPromiseします！」
「生成コード」とは、時間がかかるコードのことです。
「消費コード」とは、結果を待たなければならないコードです。
Promiseは、生成コードと消費コードをリンクするJavaScriptオブジェクトです。
JavaScript Promiseオブジェクト
JavaScriptのPromiseオブジェクトには、生成コードと消費コードへの呼び出しの両方が含まれます。
Promiseの構文
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
生成コードが結果を取得したら、次の2つのコールバックのいずれかを呼び出す必要があります。
| 結果 | 電話 |
|---|---|
| 成功 | myResolve(結果値) |
| エラー | myReject(エラー オブジェクト) |
Promiseオブジェクトのプロパティ
JavaScript Promiseオブジェクトは次のようになります。
- 保留中
- 履行済み
- 却下
Promiseオブジェクトは、stateとresultという2つのプロパティをサポートしています。
Promiseオブジェクトが「保留中」(動作中)である間、結果は未定義です。
Promiseオブジェクトが「満たされる」と、結果は値になります。
Promiseオブジェクトが「拒否」されると、結果はエラーオブジェクトになります。
| myPromise.state | myPromise.result |
|---|---|
| "保留中" | 未定義 |
| 「満たされた」 | 結果値 |
| 「拒否されました」 | エラーオブジェクト |
Promiseプロパティのstateおよびresultにはアクセスできません。
Promiseを処理するには、Promiseメソッドを使用する必要があります。
Promiseする方法
Promiseの使用方法は次のとおりです。
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
:::panel {.techis-panel .techis-note}
Promise.then()は、成功のコールバックと失敗のコールバックの2つの引数を取ります。
どちらもオプションなので、成功または失敗のみのコールバックを追加できます。
:::panel
例
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
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("File not Found");
}
};
req.send();
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
ブラウザのサポート
ES6とも呼ばれる ECMAScript2015では、JavaScript Promiseオブジェクトが導入されました。
次の表は、Promiseオブジェクトを完全にサポートする最初のブラウザーバージョンを示しています。
| クロム 33 | エッジ 12 | Firefox 29 | サファリ7.1 | オペラ 20 |
| 2014年2月 | 2015年7月 | 2014年4月 | 2014年9月 | 2014年3月 |