new Promise() / then() / catch() / finally() 対応: ES6(ECMAScript 2015)
非同期処理の結果を表すオブジェクトです。処理が完了したら『then()』で結果を受け取り、失敗したら『catch()』でエラーを処理します。
構文
// Promiseを作成します。
var promise = new Promise(function(resolve, reject) {
// 成功時にresolve()を呼びます。
// 失敗時にreject()を呼びます。
});
// 結果を受け取ります。
promise
.then(function(結果) { /* 成功時の処理 */ })
.catch(function(エラー) { /* 失敗時の処理 */ })
.finally(function() { /* 成功・失敗に関わらず実行される処理 */ });
メソッド一覧
| メソッド | 概要 |
|---|---|
| promise.then(関数) | Promiseが成功した時に実行される関数を登録します。『resolve()』に渡した値が引数として受け取れます。 |
| promise.catch(関数) | Promiseが失敗した時に実行される関数を登録します。『reject()』に渡した値が引数として受け取れます。 |
| promise.finally(関数) | Promiseの成功・失敗に関わらず、最後に必ず実行される関数を登録します。引数は受け取れません。 |
サンプルコード
// 基本的なPromiseの使い方
var promise = new Promise(function(resolve, reject) {
var success = true;
if (success) {
resolve("処理が成功しました!"); // 成功時の値を渡します。
} else {
reject("処理が失敗しました…"); // 失敗時の値を渡します。
}
});
promise
.then(function(result) {
console.log(result); // 『処理が成功しました!』と出力されます。
})
.catch(function(error) {
console.log(error); // 失敗した場合にここが実行されます。
});
// 時間のかかる処理をシミュレーションする例
function wait(ms) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve(ms + "ミリ秒待ちました");
}, ms);
});
}
wait(2000).then(function(message) {
console.log(message); // 2秒後に『2000ミリ秒待ちました』と出力されます。
});
// サーバーからデータを取得する実用例
fetch("https://api.example.com/data")
.then(function(response) {
return response.json(); // JSON形式に変換します。これもPromiseを返します。
})
.then(function(data) {
console.log(data); // 取得したデータが出力されます。
})
.catch(function(error) {
console.log("通信に失敗しました: " + error.message);
})
.finally(function() {
console.log("通信処理が完了しました"); // 成功・失敗に関わらず実行されます。
});
// then()のチェーン接続
wait(1000)
.then(function(msg) {
console.log(msg); // 『1000ミリ秒待ちました』と出力されます。
return wait(1000); // 次のPromiseを返します。
})
.then(function(msg) {
console.log(msg); // さらに1秒後に『1000ミリ秒待ちました』と出力されます。
});
Promiseの3つの状態
Promiseには3つの状態があり、一度確定した状態は変わりません。
| 状態 | 概要 |
|---|---|
| pending | 待機中の状態です。Promiseが作成された直後で、まだ成功も失敗もしていません。 |
| fulfilled | 成功の状態です。『resolve()』が呼ばれ、『then()』で結果を受け取れます。 |
| rejected | 失敗の状態です。『reject()』が呼ばれた、またはエラーが発生し、『catch()』でエラーを処理できます。 |
概要
Promiseは「まだ結果が出ていないけれど、いずれ成功か失敗の結果が返ってくる」ことを表すオブジェクトです。サーバーとの通信、ファイルの読み込み、タイマー処理など、完了までに時間がかかる処理を扱うために使われます。
Promiseが登場する前は、非同期処理の結果を受け取るためにコールバック関数を何重にも入れ子にする必要があり、コードの可読性が著しく低下する問題がありました。これは「コールバック地獄」と呼ばれていました。Promiseの『then()』メソッドをチェーン接続することで、非同期処理を上から下へ読める直線的なコードで記述できるようになりました。
さらに簡潔に非同期処理を書きたい場合は、『async / await』構文を使用すると、同期処理のように見える直感的なコードで記述できます。
対応ブラウザ
デスクトップ
31 以前 ×
28 以前 ×
7 以前 ×全バージョンで非対応
モバイル
Android Browser
37 以降 ○
4 以前 ×
Chrome Android
37 以降 ○
31 以前 ×
Firefox Android
79 以降 ○
28 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。