Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Js async

154 views

Published on

promise async/await 非同期処理周りの話。発表用

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Js async

  1. 1. JavaScriptの 光と闇を知る 非同期処理の話 Presented by JS初心者まっきー
  2. 2. 自己紹介 • Python が好きなJavascript初心者です • ボルダリング行きたい • @makky_tw
  3. 3. Javascriptといえば非同期処理 • 非同期処理とJavascriptは切っても切れない関係 • 非同期処理を分かっていないとJavascriptはつらい(経 験談) • イケてるフロントエンジニアとは非同期処理を分か っているということである
  4. 4. キーワード • シングルスレッド • 非同期処理 • Promise • async/await • promisify ( pify )
  5. 5. なぜ非同期処理が必要か • Javascriptはシングルスレッドで動作する • よってJavascriptは並列処理はできない • もし全て同期的に処理していたらhttp通信などの時間 のかかる処理で全体の処理が止まってしまう • 非同期処理をすることで時間のかかる処理を待って いる間に他の処理を走らせることが可能になる
  6. 6. 問題 • このコードの出力結果は? 1 3 2
  7. 7. 問題2 • このコードの出力結果は? 1 2 3 4 5 6 7 8 9 早く表示しろ!
  8. 8. なぜ? • setTimeout()は 「n秒後に実行する」ではなく、 「n秒後に実行キューに追加する」であるから • すなわち、正確にはsetTimeout(func, n)はn秒後に funcを実行しているのではなく、キューに追加されて から実行されるまでのラグが存在する • キューに追加されてから他の重い処理が割り込むと 、n秒後に実行されていないように感じる
  9. 9. Promise • Promiseは非同期処理のコールバック地獄(コールバック関数を 書きまくってネストが深くなること) から逃れるための仕組み • コールバック地獄とは何かを簡単なコードで書いた例がココに 載っている http://qiita.com/YoshikiNakamura/items/732ded26c85a7f771a2 7#%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E 7%90%86%E3%82%92%E8%A1%8C%E3%81%AA%E3%81% 86%E9%96%A2%E6%95%B0%E3%82%92%E4%BD%9C%E3 %82%8B%E3%82%B3%E3%83%BC%E3%83%AB%E3%83% 90%E3%83%83%E3%82%AF%E7%89%88
  10. 10. async/await • Promiseはコールバック地獄から逃れる良い手段 • しかし、非同期処理をする回数が不定で合った場合 、thenを不定回数書くことはできないため困る(再 帰的に関数を書けば解決できるが人類で再帰関数を 書きたがる者は稀である) • async / await を使うことで簡潔で柔軟な処理が書け る
  11. 11. async/await • async/await のコードを書いてみた https://gist.github.com/tonkatu05/a8a846f1db4a790b 1e1854760a4c3beb
  12. 12. promisify (pify) • promisify あるいは pifyを使って既存の非同期関数を promise化できる • promisifyはnode v8 からの機能 • node v6 の場合はpifyで同等のことが可能(?) • http://abouthiroppy.hatenablog.jp/entry/2017/04/27/1 10733
  13. 13. promisify (pify) • promisifyを使えばたくさんpromise作れてたくさん async/await使えてうれしいね!ということ • 筆者は使ったことがないのでありがたみを感じては いない
  14. 14. 最後に • 非同期処理をマスターしてJavascriptを倒そう

×