new Promise() / then() / catch() / finally()対応: ES6（ECMAScript 2015）

// Promiseを作成します。
var promise = new Promise(function(resolve, reject) {
	// 成功時にresolve()を呼びます。
	// 失敗時にreject()を呼びます。
});

// 結果を受け取ります。
promise
	.then(function(結果) { /* 成功時の処理 */ })
	.catch(function(エラー) { /* 失敗時の処理 */ })
	.finally(function() { /* 成功・失敗に関わらず実行される処理 */ });

// 基本的な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ミリ秒待ちました』と出力されます。
	});

"処理が成功しました！"           // resolve()の値がthen()に渡されます
"2000ミリ秒待ちました"           // 2秒後に出力されます
"1000ミリ秒待ちました"           // 1秒後に出力されます
"1000ミリ秒待ちました"           // さらに1秒後に出力されます
"通信処理が完了しました"         // finally()は常に実行されます

Promiseには3つの状態があり、一度確定した状態は変わりません。

Promiseは「まだ結果が出ていないけれど、いずれ成功か失敗の結果が返ってくる」ことを表すオブジェクトです。サーバーとの通信、ファイルの読み込み、タイマー処理など、完了までに時間がかかる処理を扱うために使われます。

Promiseが登場する前は、非同期処理の結果を受け取るためにコールバック関数を何重にも入れ子にする必要があり、コードの可読性が著しく低下する問題がありました。これは「コールバック地獄」と呼ばれていました。Promiseの『then()』メソッドをチェーン接続することで、非同期処理を上から下へ読める直線的なコードで記述できるようになりました。

さらに簡潔に非同期処理を書きたい場合は、『async / await』構文を使用すると、同期処理のように見える直感的なコードで記述できます。