JavaScriptで非同期処理を実装するPromiseオブジェクトにおいて成功判定の行い方とその後の処理の実装方法を理解しよう

Promiseオブジェクトを使って処理が成功する時の処理の書き方

前ページで、Promiseオブジェクトを使った処理の概念部分の解説を行いました。

このページでは、Promiseオブジェクトを使って処理が成功する時の処理の書き方について着目して解説していきます。

オブジェクト

オブジェクト意味返り値
new Promise(関数)Promiseを作成するPromiseインスタンス
resolve(引数)Promiseインスタンス内で利用され、非同期処理の終了(成功)を宣言するメソッド。Promiseインスタンス.then(関数)の関数に対して引数の値を渡すことができる。なし
reject(引数)Promiseインスタンス内で利用され、非同期処理の終了(失敗)を宣言するメソッド。Promiseインスタンス.catch(関数)の関数に対して引数の値を渡すことができる。なし
Promiseインスタンス.then(関数)成功した時のコールバック関数を呼び出し実行Promise
Promiseインスタンス.catch(関数)失敗した時のコールバック関数を呼び出し実行Promise
Promise.all(配列)複数のPromiseを並列に実行するPromise
Promiseオブジェクトの仕様

サンプルコード

サンプルコードとして、Promise内の処理が結果を成功したものとして判定させて、失敗時の処理だけを書いたコードを紹介します。

Output
残り時間
Pug
table.table
			tbody
				tr
					th 残り時間
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

const totalTime = 10000; // ミリ秒で10秒を示す
const oldTime = Date.now();

//Promiseインスタンスに渡す関数の定義
function countdownTimerFunction ( resolve ) {
	const countdownTimer = setInterval(() => {
	const currentTime = Date.now();
	const diffTime = currentTime - oldTime;
	const remainTime = Math.ceil((totalTime - diffTime) / 1000);
		if ( remainTime <= 0 ) {
			resolve( `非同期処理は終了し、成功判定を返します。` ); //resolveの引数の値はPromiseインスタンス.thenメソッドに渡る
			clearInterval( countdownTimer );
		} else {
			targetText.textContent = `残り${remainTime}(非同期処理中)`;
		}
	}, 1000);
}

//処理が成功した時に宣言する関数を定義
function onResolved( value ) {
	targetText.textContent = value;
}



//Promiseインスタンスの宣言
const promise = new Promise(countdownTimerFunction);

//Promiseインスタンスの非同期処理終了時後の処理
promise.then(onResolved);
インストラクター