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