Promise の使い方の1回目として以下の記事を書きましたが、エラー処理に付いては書いていませんでしたので、今回追加の記事を書いてみます。
⇒JavaScript Promiseの使い方(非同期処理に関連して)
あらためて、Promise の説明ですが、以下の様になります。
■Promise の説明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 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回目の記事での例を以下に示します。
1 2 3 4 5 6 7 8 | // コールバック用の関数を再掲 function test_callback2(timeoutval) { return new Promise((resolve) { setTimeout( function () { resolve(timeoutval); // 成功時の関数をコール }, timeoutval); }); } |
この関数は setTimeout を使ってタイムアウトした時に resolve で指定された関数を実行します。
setTimeout にはエラー等は発生することは無いのですが、仮に指定されたタイムアウト値が奇数の場合は失敗時とし、 偶数の場合には成功時として関数を書き変えてみます。
1 2 3 4 5 6 7 8 9 10 11 12 | // コールバック用の関数を再掲 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 メソッドに関数を記述します。
以下に、実行例を示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 成功時のテスト 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); }); |
結果としてコンソールには以下の出力が行われます。
1 2 | callback...OK:1000 callback...NG:1001 |
■実際にエラーが起きる場合の例
上記の例では便宜的に失敗時の処理が発生する様にして例を示しましたが、 以下の例ではエラーが起きるであろう場合の例を記します。
以下の関数は XMLHttpRequest を使用してテキストファイルの取得をします。
XMLHttpRequest のロード後のイベントとして「onload」時の関数を、 レスポンスの HTTP ステータスに従って、成功時と失敗時の関数コールを変えています。
また、エラー時のイベントとして「onload」時の関数を、失敗時の関数コールを行う様にしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 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; } |
これを使用する例を以下に記します。
1 2 3 4 5 6 7 8 9 10 11 12 | // 最初は存在するテキストファイル 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.”の文字列が書かれています)
1 2 3 | test.txt:This is test. GET http: //localhost/__IndexedDB/aaa.txt 404 (Not Found) // ここは2回目の getFile の xhr.send でエラーが発生する aaa.txt...NG:Not Found |
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
⇒JavaScript jQueryを使った checkbox の操作方法
JavaScriptによるWeb開発のための、究極のレシピ集。 制作の現場で使われる定番テクニックからプロ技まで集めたそうです。
コメント