JAVA Script Promise .then pending resolved rejected PromiseStatusのソースを表示

[[JAVA Script]]へ戻る。
== '''概要''' ==
　Promiseは非同期処理についての処理順序を制御するためのメカニズムをもった特殊なオブジェクトです。


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


　例えば、
<syntaxhighlight lang="javascript">
<span id="result"></span>
<script>
r = document.getElementByID("result").innerHTML;
r += "1 : 順序処理"
timerID = SetTimeout(() => {
  r += "2 : 3秒経過。非同期処理"
}, 3000);
r += "3 : 順序処理"
</script>
</syntaxhighlight>
　のような処理はSetTimeout関数が実行されるのが非同期であるために結果のHTML部には
 1 : 順序処理
 3 : 順序処理
 2 : 3秒経過。非同期処理
　といったような結果になります。このように動作する順番に処理されないで別プロセスのようにふるまって、順序関係なく、3000ミリ秒が経過したら空気も読まず、SetTimeout関数のタイミングだけで処理が進行します。このような関数を使っているときを非同期処理を行っていると言います。SetTimeoutは非同期処理関数ともいうと思います。


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

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


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

　

[[JAVA Script]]へ戻る。