JAVA Script Promise .then pending resolved rejected PromiseStatus

提供:yonewiki
2022年11月24日 (木) 23:14時点におけるYo-net (トーク | 投稿記録)による版 (ページの作成:「== '''概要''' ==  Promiseは非同期処理についての処理順序を制御するためのメカニズムをもった特殊なオブジェクトです。  非同期というのは、逐次処理されないような関数をさします。代表的なモノにはSetTimeout関数があります。  例えば、 <syntaxhighlight lang="javascript"> <span id="result"></span> <script> r = document.getElementByID("result").innerHTML; r += "1 : 順序処理…」)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)

概要

 Promiseは非同期処理についての処理順序を制御するためのメカニズムをもった特殊なオブジェクトです。


 非同期というのは、逐次処理されないような関数をさします。代表的なモノにはSetTimeout関数があります。


 例えば、

<span id="result"></span>
<script>
r = document.getElementByID("result").innerHTML;
r += "1 : 順序処理"
timerID = SetTimeout(() => {
  r += "2 : 3秒経過。非同期処理"
}, 3000);
r += "3 : 順序処理"
</script>

 のような処理はSetTimeout関数が実行されるのが非同期であるために結果のHTML部には

1 : 順序処理
3 : 順序処理
2 : 3秒経過。非同期処理

 といったような結果になります。このように動作する順番に処理されないで別プロセスのようにふるまって、順序関係なく、3000ミリ秒が経過したら空気も読まず、SetTimeout関数のタイミングだけで処理が進行します。このような関数を使っているときを非同期処理を行っていると言います。SetTimeoutは非同期処理関数ともいうと思います。


 Promise は、このような非同期処理を順序制御するための仕組みです。1 2 3 のように順番になるようにするには SetTimeoutが終わったことを3つめの処理に伝えられなけばならないです。以下のように記述します。

<span id="result"></span>
<script>
r = document.getElementByID("result").innerHTML;
r += "1 : 順序処理"
New Promise((AsyncProc) => {
  timerID = SetTimeout(() => {
    r += "2 : 3秒経過。順序処理";
    AsyncProc("(Promise経由)");
  }, 3000);
}).then((str) => {
  r += "3 : 順序処理"+ str;
});
</script>
 という具合にしますこうするとAsyncProcという関数は Promise の約束に従って処理が終わったらPromise の第一引数で指定されている関数を呼び出すようにしておけば呼出し後に .then(arg)の関数が実行されるという仕組みにできます順序どおりの処理が非同期関数を使っていながら分かつことができるというのがこのPromiseの効果です処理を分かつ必要もない場合やメインの制御で逐次実行されているものとの処理順を気にしない場合はまとめて記述すればいいです


 もう少し細かいところに着目すると状態というものを PromiseStatus にもっていて非同期処理中は Pending 非同期処理成功で esolved になり .thenの関数が呼ばれる非同期処理失敗で rejected になり .catch が呼ばれます