JavaScript Promiseの使い方２(非同期処理に関連して)｜VB.NET-TIPS などプログラミングについて

2024/08/28

Promise の使い方の1回目として以下の記事を書きましたが、エラー処理に付いては書いていませんでしたので、今回追加の記事を書いてみます。

⇒JavaScript Promiseの使い方(非同期処理に関連して)
あらためて、Promise の説明ですが、以下の様になります。

■Promise の説明

// Promiseの生成
const Promise = new Promise((resolve, reject) => {
    // ここで何かの処理
	// …

    if ( [成功]/[失敗]の判定 ) {
        resolve("OK");	// [成功]
    } else {
        reject("NG");	// [失敗]
    }
});

// Promiseの実行
Promise.then((result) => {
	// 成功時は「resolve」から渡されるものが「result」に返される
	console.log(result);	// "OK"が表示される
})
.catch((error) => {
	// 失敗時は「reject」から渡されるものが「error」に返される
	console.log(error);		// "NG"が表示される
});

1回目の記事での例を以下に示します。

// コールバック用の関数を再掲
function test_callback2(timeoutval) {
    return new Promise((resolve) {
        setTimeout(function() {
            resolve(timeoutval);	// 成功時の関数をコール
        }, timeoutval);
    });
}

この関数は setTimeout を使ってタイムアウトした時に resolve で指定された関数を実行します。
setTimeout にはエラー等は発生することは無いのですが、仮に指定されたタイムアウト値が奇数の場合は失敗時とし、偶数の場合には成功時として関数を書き変えてみます。

// コールバック用の関数を再掲
function test_callback2(timeoutval) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
			if ((timeoutval & 1) == 0) {
	            resolve(timeoutval);	// 成功時の関数をコール
			} else {
	            reject(timeoutval);		// 失敗時の関数をコール
			}
        }, timeoutval);
    });
}

■Promiseを使って失敗時と成功時の処理を追加したもの

test_callback2 は Promiseオブジェクトを返してきますので、成功時の処理を行う為に、then メソッドに関数を記述します。成功時の戻り値が在る場合は引数を記述します。（以下の例では「data」にあたります）
また、失敗時の処理を行う為に、catch メソッドに関数を記述します。
以下に、実行例を示します。

// 成功時のテスト
test_callback2(1000).then((data) => {
    console.log('callback...OK:' + data);
}).catch((data) => {						// タイムアウト値が偶数なのでここは呼ばれない
    console.log('callback...NG:' + data);
});

// 失敗時のテスト
test_callback2(1001).then((data) => {		// タイムアウト値が奇数なのでここは呼ばれない
    console.log('callback...OK:' + data);
}).catch((data) => {
    console.log('callback...NG:' + data);
});

結果としてコンソールには以下の出力が行われます。

callback...OK:1000
callback...NG:1001

■実際にエラーが起きる場合の例

上記の例では便宜的に失敗時の処理が発生する様にして例を示しましたが、以下の例ではエラーが起きるであろう場合の例を記します。

以下の関数は XMLHttpRequest を使用してテキストファイルの取得をします。
XMLHttpRequest のロード後のイベントとして「onload」時の関数を、レスポンスの HTTP ステータスに従って、成功時と失敗時の関数コールを変えています。
また、エラー時のイベントとして「onload」時の関数を、失敗時の関数コールを行う様にしています。

// XMLHttpRequest を使用してテキストファイルの取得
function getFile(url) {
    const promise = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload  = () => { 
						if (xhr.status == 200) { // レスポンスの HTTP ステータスを解析
							resolve(xhr);
						} else {
							reject(xhr);
						}
						
					  };
        xhr.onerror  = () => { 
						 reject(xhr);
					  };
        xhr.send(null);
    });
    return promise;
}

これを使用する例を以下に記します。

// 最初は存在するテキストファイル
getFile('test.txt').then((xhr) => {
    console.log('test.txt:' + xhr.responseText);
}).catch((xhr) => {
    console.log('test.txt...NG:' + xhr.statusText);
});
// 存在しないテキストファイル
getFile('aaa.txt').then((xhr) => {
    console.log('aaa.txt:' + xhr.responseText);
}).catch((xhr) => {
    console.log('aaa.txt...NG:' + xhr.statusText);
});

結果として、コンソールに以下のものが出力されます。（test.txt の内容は”This is test.”の文字列が書かれています）

test.txt:This is test.
GET http://localhost/__IndexedDB/aaa.txt 404 (Not Found)  // ここは2回目の getFile の xhr.send でエラーが発生する
aaa.txt...NG:Not Found

VB.NET-TIPS などプログラミングについて

■Promise の説明

■Promiseを使って失敗時と成功時の処理を追加したもの

■実際にエラーが起きる場合の例

関連する記事

コメント