17
ES6Promise のののの

Es6 promiseのすゝめ

Embed Size (px)

Citation preview

Page 1: Es6 promiseのすゝめ

ES6Promise のすゝめ

Page 2: Es6 promiseのすゝめ

自己紹介

@MysticDoll 略してみすどとか名乗ってますみすどさん 友達いない 大学に ( 五七五 )

BEMANI 系の音ゲーします。

普段はアルバイトで某 C 社のグループウェアのカスタマイズ書いたり、 C 社の開発者コミュニティで質問に答えたりしてます。JavaScript を主に書きます。たしなむ程度にはほかの言語も

Page 3: Es6 promiseのすゝめ

こういう ( 頭の病気の ) 人です

Page 4: Es6 promiseのすゝめ

Promise とは

• ES6Promise のことです。• 簡単に言うと非同期処理を扱いやすくするやつです、便利• これを使うとコールバック地獄とかいうフロントエンドおじ

さんの悲鳴が聞こえなくなります。たぶん

Page 5: Es6 promiseのすゝめ

基本形

Page 6: Es6 promiseのすゝめ

Promise のチェーン処理

Page 7: Es6 promiseのすゝめ

Promise チェーンの流れ

• Promise オブジェクトはコールバック関数の resolve が実行されるまで待ってから次の .then のコールバック関数を実行します。• .then 関数内で Promise が return された場合はその Promise

の resolve が呼ばれるまで待ってから次の .then を実行します。

• これによって非同期で行われるような通信などのコールバック処理を順番通りの処理として書くことが容易になり、コールバックのネストが解消されます。

Page 8: Es6 promiseのすゝめ

Promise チェーンの値渡し

• Promise 内の resolve の引数にされた値が.then 関数のコールバック関数の引数に渡されます。• .then コールバック関数内では return された値が次の .then

コールバックに渡されます。• return された値が Promise である場合

その Promise の resolve の引数が次に渡されます。

Page 9: Es6 promiseのすゝめ

エラー処理

• Promise 内で reject が実行された / 例外が throw された場合.catch(fn) で reject の引数 /throw されたエラーを拾える。当然 reject にはエラーオブジェクトを投げ込む• Promise 内で例外が発生した場合は

Promise 内で例外が隠ぺいされてしまうため .catch 以外の方法で検出することができないので注意が必要。• よくないけど普通の Object を throw してもできるっぽい。

できる限り新しい Promise を return するようにして例外は reject した方が良い ( 例外か意図した throw か判別するため )

Page 10: Es6 promiseのすゝめ

エラーのやつ

Page 11: Es6 promiseのすゝめ

resolve と reject• 任意の値を resolve/reject した Promise オブジェクトを作る

なら Promise.resolve/Promise.reject メソッドを使えばよい

べんり!

Page 12: Es6 promiseのすゝめ

今回やったこと• 桃太郎のお話を Promise で実現しようと思います。• 勢いだけで実装するのであんまりおもしろくないかもしれな

い。• 水曜日に体調を崩して寝込んだためすべてが適当です。

Page 13: Es6 promiseのすゝめ

要件

• 桃太郎の話をいろいろ分解して Promise 関数化してみました。• 今回は delayTime を 1000 ミリ秒に設定して

話がいい感じに進むようになってます。• 実装が雑なのでたまに delayTime 気にしていない出力がいま

す。気にしないでください• さっき throw じゃなくて reject しろみたいなこと書いてたけ

どさっき気づいたので直してません。許してください。リポジトリのやつは直しました。

Page 14: Es6 promiseのすゝめ
Page 15: Es6 promiseのすゝめ
Page 16: Es6 promiseのすゝめ

デモ

http://mysticdoll.github.io/momotaro/ にて動いてます。リポジトリは https://github.com/mysticdoll/momotaro

Page 17: Es6 promiseのすゝめ

参考になるページ

• JavaScript Promiseの本 ぶっちゃけこれだけ見れば大体全部 Promise のことわかるってくらいわかりやすい。このスライドよりこっちちゃんと読んだ方が数百倍ためになります