Slide 1
Slide 1 text
Ajax in React with
axios
@React&React Native入門者の会
Slide 2
Slide 2 text
自己紹介
• 大木尊紀（@takanorip）
• 株式会社フォーデジットデザイン
• フロントエンドエンジニア
Slide 3
Slide 3 text
今日話すこと
Slide 4
Slide 4 text
Reactで
PromiseなAjaxやってみた
という話
Slide 5
Slide 5 text
前提
Slide 6
Slide 6 text
React = Library
(React ≠ FrameWork)
Slide 7
Slide 7 text
Ajaxは自前で
実装する必要がある
Slide 8
Slide 8 text
主な実装方法
Slide 9
Slide 9 text
jQuery
Slide 10
Slide 10 text
jQueryによる実装
Slide 11
Slide 11 text
Ajaxだけで使うには
jQueryは重すぎ…
Slide 12
Slide 12 text
Promise
ES2015
Slide 13
Slide 13 text
Promise
• 非同期処理を抽象化したオブジェクト
• ES2015で実装された
• 書き方が統一されている
• 詳しくは→JavaScript Promiseの本
Slide 14
Slide 14 text
axios
Slide 15
Slide 15 text
axios
• Promise based HTTP client for the browser
and node.js
• PromiseベースのHTTPクライアント
• IEでもPromise使えるようになる
Slide 16
Slide 16 text
How To Use
Slide 17
Slide 17 text
How To Use
1. HFU
ͰGETϦΫΤετ
2. σʔλऔಘޙʹUIFO
Λ࣮ߦ
3. Τϥʔͷ߹ DBUDI
Λ࣮ߦ
Slide 18
Slide 18 text
ײ
• jQueryʹ͘ΒͯεοΩϦ͔͚ΔͷͰخ͍͠
• JSONPରԠͯ͠ͳ͍ͷͰΫϩευϝΠϯରԠ
͢Δࡍҙ͕ඞཁ
(I have decided not to support JSONP as part of axios.)
ということらしい…