JavaScriptの約束
「私は結果を約束します！」
「コードの作成」とは、時間がかかるコードです。
「消費コード」は結果を待たなければならないコードです
Promiseは、コードの生成とコードの消費をリンクするJavaScriptオブジェクトです。
JavaScriptPromiseオブジェクト
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オブジェクトのプロパティ
JavaScriptPromiseオブジェクトは次のようになります。
- 保留中
- 満たされた
- 拒否されました
Promiseオブジェクトは、 stateとresultの2つのプロパティをサポートしています。
Promiseオブジェクトが「保留中」（動作中）である間、結果は未定義です。
Promiseオブジェクトが「実行」されると、結果は値になります。
Promiseオブジェクトが「拒否」されると、結果はエラーオブジェクトになります。
| myPromise.state | myPromise.result |
|---|---|
| "保留中" | 未定義 |
| 「満たされた」 | 結果値 |
| 「拒否されました」 | エラーオブジェクト |
Promiseプロパティの状態と結果にアクセスすることはできません。
Promiseを処理するには、Promiseメソッドを使用する必要があります。
方法を約束する
Promiseの使用方法は次のとおりです。
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then（）は、成功のコールバックと失敗のコールバックの2つの引数を取ります。
どちらもオプションであるため、成功または失敗の場合にのみコールバックを追加できます。
例
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);}
);
JavaScriptPromiseの例
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は、JavaScriptPromiseオブジェクトを導入しました。
次の表は、Promiseオブジェクトを完全にサポートする最初のブラウザバージョンを定義しています。
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |