es6 promiseのすゝめ
TRANSCRIPT
![Page 1: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/1.jpg)
ES6Promise のすゝめ
![Page 2: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/2.jpg)
自己紹介
@MysticDoll 略してみすどとか名乗ってますみすどさん 友達いない 大学に ( 五七五 )
BEMANI 系の音ゲーします。
普段はアルバイトで某 C 社のグループウェアのカスタマイズ書いたり、 C 社の開発者コミュニティで質問に答えたりしてます。JavaScript を主に書きます。たしなむ程度にはほかの言語も
![Page 3: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/3.jpg)
こういう ( 頭の病気の ) 人です
![Page 4: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/4.jpg)
Promise とは
• ES6Promise のことです。• 簡単に言うと非同期処理を扱いやすくするやつです、便利• これを使うとコールバック地獄とかいうフロントエンドおじ
さんの悲鳴が聞こえなくなります。たぶん
![Page 5: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/5.jpg)
基本形
![Page 6: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/6.jpg)
Promise のチェーン処理
![Page 7: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/7.jpg)
Promise チェーンの流れ
• Promise オブジェクトはコールバック関数の resolve が実行されるまで待ってから次の .then のコールバック関数を実行します。• .then 関数内で Promise が return された場合はその Promise
の resolve が呼ばれるまで待ってから次の .then を実行します。
• これによって非同期で行われるような通信などのコールバック処理を順番通りの処理として書くことが容易になり、コールバックのネストが解消されます。
![Page 8: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/8.jpg)
Promise チェーンの値渡し
• Promise 内の resolve の引数にされた値が.then 関数のコールバック関数の引数に渡されます。• .then コールバック関数内では return された値が次の .then
コールバックに渡されます。• return された値が Promise である場合
その Promise の resolve の引数が次に渡されます。
![Page 9: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/9.jpg)
エラー処理
• Promise 内で reject が実行された / 例外が throw された場合.catch(fn) で reject の引数 /throw されたエラーを拾える。当然 reject にはエラーオブジェクトを投げ込む• Promise 内で例外が発生した場合は
Promise 内で例外が隠ぺいされてしまうため .catch 以外の方法で検出することができないので注意が必要。• よくないけど普通の Object を throw してもできるっぽい。
できる限り新しい Promise を return するようにして例外は reject した方が良い ( 例外か意図した throw か判別するため )
![Page 10: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/10.jpg)
エラーのやつ
![Page 11: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/11.jpg)
resolve と reject• 任意の値を resolve/reject した Promise オブジェクトを作る
なら Promise.resolve/Promise.reject メソッドを使えばよい
べんり!
![Page 12: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/12.jpg)
今回やったこと• 桃太郎のお話を Promise で実現しようと思います。• 勢いだけで実装するのであんまりおもしろくないかもしれな
い。• 水曜日に体調を崩して寝込んだためすべてが適当です。
![Page 13: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/13.jpg)
要件
• 桃太郎の話をいろいろ分解して Promise 関数化してみました。• 今回は delayTime を 1000 ミリ秒に設定して
話がいい感じに進むようになってます。• 実装が雑なのでたまに delayTime 気にしていない出力がいま
す。気にしないでください• さっき throw じゃなくて reject しろみたいなこと書いてたけ
どさっき気づいたので直してません。許してください。リポジトリのやつは直しました。
![Page 14: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/14.jpg)
![Page 15: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/15.jpg)
![Page 16: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/16.jpg)
デモ
http://mysticdoll.github.io/momotaro/ にて動いてます。リポジトリは https://github.com/mysticdoll/momotaro
![Page 17: Es6 promiseのすゝめ](https://reader036.vdocuments.site/reader036/viewer/2022062316/5883986b1a28ab2b568b5a59/html5/thumbnails/17.jpg)
参考になるページ
• JavaScript Promiseの本 ぶっちゃけこれだけ見れば大体全部 Promise のことわかるってくらいわかりやすい。このスライドよりこっちちゃんと読んだ方が数百倍ためになります