Promiseによる非同期処理[resolve][reject][Promise.all]

2018年12月14日

Promiseは非同期処理を実現するオブジェクトです。今回はその処理方法を手短に説明してみます。

 

早速具体的にシンプルなコードから。下記を実行すると、setTimeoutによって非同期処理がおこなわれ、2秒後に「hello!」と表示されます。

2行目

testFunction()関数の中で、Promiseオブジェクトを生成しています。Promiseの引数にresolveとrejectがありますが、これが非同期処理(上記ではsetTimeout)が実行された場合のコールバック関数となります。

 

4行目

resolveは処理が正常に終了した時に呼ばれるコールバック関数です。また上記では記述されていませんが、rejectは処理が失敗した時に呼ばれるコールバック関数となります。resolveに引数がありますが、このように任意のオブジェクトを渡すことができます。具体的には次で説明します。

 

10、13行目

then関数とcatch関数が記述されています。thenは、処理が正常に実行された時、すわなちresolveが実行された時に呼ばれ、resolveの引数が渡されます。catch関数は上記では記述されていませんが、rejectが実行された時に呼ばれます。

 

別の具体例で改めて説明してみます。下記を実行すると、setTimeoutによって非同期処理がおこなわれ、2秒後に「エラーです。範囲外」と表示されます。

14行目

testFunction()関数に引数1000が渡されています。5~9行目の判定によってrejectコールバック関数が呼ばれます。rejectはcatchを呼ぶので、19行目の「エラーです。${error}」が実行されます。${error}にはrejectの引数が渡され「エラーです。範囲外」という文字列が形成されます。

 

then()の第2引数に失敗時のコールバック関数を設定することもできます。つまりcatchが無くても記述できます。上記のコードを書き換えると以下のようになります。

 

 

非同期処理の連結


Promiseによって非同期処理を連結することも可能です。下記を実行すると、2秒ごとに「範囲内」→「範囲内」→「エラーです。範囲外」と表示されていきます。

17、21行目

then関数内で新たにPromiseオブジェクトを返すことによって、メソッドチェーンにより処理を連結することが可能です。

 

 

複数の非同期処理を並列処理で実行


複数の非同期処理を並列処理で一気に実行することもできます。下記を実行すると、2秒後に「[ ‘範囲内’, ‘範囲内’, ‘範囲内’ ]」と表示されます。

14行目

Promise.all関数によって3つのtestFunction関数を並列に処理しています。そのすべての処理においてresoleveが呼ばれるとthen関数が実行されます。もしtestFunction(1000)のようなrejectを呼び出す処理が一つでも存在すると、catch関数が実行されます。

 

 

関連ページ

async/awaitによる非同期処理

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー