Promiseは非同期処理を実現するオブジェクトです。今回はその処理方法を手短に説明してみます。
早速具体的にシンプルなコードから。下記を実行すると、setTimeoutによって非同期処理がおこなわれ、2秒後に「hello!」と表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function testFunction() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('hello!'); }, 1000); }) } testFunction() .then(function (value) { console.log(value); }) .catch(function (error) { console.log(error); }) |
2行目
testFunction()関数の中で、Promiseオブジェクトを生成しています。Promiseの引数にresolveとrejectがありますが、これが非同期処理（上記ではsetTimeout）が実行された場合のコールバック関数となります。
4行目
resolveは処理が正常に終了した時に呼ばれるコールバック関数です。また上記では記述されていませんが、rejectは処理が失敗した時に呼ばれるコールバック関数となります。resolveに引数がありますが、このように任意のオブジェクトを渡すことができます。具体的には次で説明します。
10、13行目
then関数とcatch関数が記述されています。thenは、処理が正常に実行された時、すわなちresolveが実行された時に呼ばれ、resolveの引数が渡されます。catch関数は上記では記述されていませんが、rejectが実行された時に呼ばれます。
別の具体例で改めて説明してみます。下記を実行すると、setTimeoutによって非同期処理がおこなわれ、2秒後に「エラーです。範囲外」と表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function testFunction(value) { return new Promise(function (resoleve, reject) { setTimeout(function () { let n = value; if(n<100){ resoleve("範囲内"); }else{ reject("範囲外"); } }, 2000); }) } testFunction(1000) .then(function (value) { console.log(value); }) .catch(function(error){ console.log(`エラーです。${error}`); }) |
14行目
testFunction()関数に引数1000が渡されています。5~9行目の判定によってrejectコールバック関数が呼ばれます。rejectはcatchを呼ぶので、19行目の「エラーです。${error}」が実行されます。${error}にはrejectの引数が渡され「エラーです。範囲外」という文字列が形成されます。
then()の第2引数に失敗時のコールバック関数を設定することもできます。つまりcatchが無くても記述できます。上記のコードを書き換えると以下のようになります。
|
1 2 3 4 5 6 7 8 |
testFunction(1000) .then( function (value) { console.log(value); }, function (error) { console.log(`エラーです。${error}`); }) |
非同期処理の連結
Promiseによって非同期処理を連結することも可能です。下記を実行すると、2秒ごとに「範囲内」→「範囲内」→「エラーです。範囲外」と表示されていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function testFunction(value) { return new Promise(function (resoleve, reject) { setTimeout(function () { let n = value; if (n < 100) { resoleve("範囲内"); } else { reject("範囲外"); } }, 2000); }) } testFunction(10) .then(function (value) { console.log(value); return testFunction(50); }) .then(function (value) { console.log(value); return testFunction(150); }) .catch(function (error) { console.log(`エラーです。${error}`); }) |
17、21行目
then関数内で新たにPromiseオブジェクトを返すことによって、メソッドチェーンにより処理を連結することが可能です。
複数の非同期処理を並列処理で実行
複数の非同期処理を並列処理で一気に実行することもできます。下記を実行すると、2秒後に「[ ‘範囲内’, ‘範囲内’, ‘範囲内’ ]」と表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function testFunction(value) { return new Promise(function (resoleve, reject) { setTimeout(function () { let n = value; if (n < 100) { resoleve("範囲内"); } else { reject("範囲外"); } }, 2000); }) } Promise.all([ testFunction(10), testFunction(50), testFunction(90) ]).then(function (value) { console.log(value); }).catch(function (error) { console.log(`エラーです。${error}`); }) |
14行目
Promise.all関数によって3つのtestFunction関数を並列に処理しています。そのすべての処理においてresoleveが呼ばれるとthen関数が実行されます。もしtestFunction(1000)のようなrejectを呼び出す処理が一つでも存在すると、catch関数が実行されます。
関連ページ
