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オブジェクトの仕様

サンプルコード

サンプルコードとして、全ページのサンプルコードに対して失敗時の処理を加えた物を紹介します。

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, reject ) {
	const countdownTimer = setInterval(() => {
	const currentTime = Date.now();
	const diffTime = currentTime - oldTime;
	const remainTime = Math.ceil((totalTime - diffTime) / 1000);
		if ( remainTime <= 0 ) {
			//resolve(`0秒です。成功判定を返しました`); //処理に成功判定を与える。
			reject(`0秒です。失敗判定を返しました`); //処理に失敗判定を与える。
			clearInterval( countdownTimer );
		} else {
			targetText.textContent = `残り${remainTime}(非同期処理)`;
		}
	}, 1000);
}

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

//処理が失敗した時に宣言する関数
function onRejected( value) {
	targetText.textContent = value;
}

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

//Promiseインスタンスの非同期処理終了時後の処理
promise.then(onResolved); //成功判定時に実行
promise.catch(onRejected); //失敗判定時に実行
インストラクター