Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ajax in React with axios

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for takanorip takanorip
November 04, 2016
Technology
710
0

Ajax in React with axios

Avatar for takanorip

takanorip

November 04, 2016

More Decks by takanorip

See All by takanorip
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
770
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
290
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.3k

Other Decks in Technology

See All in Technology
Claude Code×Terraform IaC テンプレート駆動開発
Avatar for Itou Hideki itouhi
1
510
FinOps × AIエージェントで実現する コストインシデントの自動調査
Avatar for T.REX oasis1994liveforever
0
130
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
870
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
Avatar for Hiroaki Sano hiroakis
2
1.7k
AIソロプレナー時代に2ヶ月で20人増員した事業創造会社の開発組織の話
Avatar for Koji Miyata miyatakoji
0
610
2026TECHFRESH畢業分享會 - Lightning Talk - 打造精準高效的 MCP 設計模式與測試實務
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
880
AIはどのように 組織のアジリティを変えるのか？
Avatar for J.K junki
1
520
RSA暗号を手計算したくなること、ありますよね？？ (20260615_orestudy6_rsa)
Avatar for Koki Senda thousanda
0
300
Microsoft Build Keynoteふりかえり
Avatar for tomokusaba tomokusaba
0
120
小さく始める AI 活用推進 ― 日経電子版 Web チームの事例/nikkei-tech-talk47
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
230
白金鉱業Meetup_Vol.24_「AIエージェントは分けるほど良い」は本当か？ / Is it true that “the more you divide AI agents, the better”?
Avatar for BrainPad brainpadpr
1
310
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
890

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
840
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
310
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
410
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
320
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.8k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
270
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140

Transcript

  1. Ajax in React with axios @React&React Native入門者の会

  2. 自己紹介 • 大木尊紀（@takanorip） • 株式会社フォーデジットデザイン • フロントエンドエンジニア

  3. 今日話すこと

  4. Reactで PromiseなAjaxやってみた という話

  5. 前提

  6. React = Library (React ≠ FrameWork)

  7. Ajaxは自前で 実装する必要がある

  8. 主な実装方法

  9. jQuery

  10. jQueryによる実装

  11. Ajaxだけで使うには jQueryは重すぎ…

  12. Promise ES2015

  13. Promise • 非同期処理を抽象化したオブジェクト • ES2015で実装された • 書き方が統一されている • 詳しくは→JavaScript Promiseの本

  14. axios

  15. axios • Promise based HTTP client for the browser and

    node.js • PromiseベースのHTTPクライアント • IEでもPromise使えるようになる

  16. How To Use

  17. How To Use 1. HFU ͰGETϦΫΤετ 2. σʔλऔಘޙʹUIFO Λ࣮ߦ 3.

    Τϥʔͷ৔߹͸ DBUDI Λ࣮ߦ

  18. ײ૝ • jQueryʹ͘Β΂ͯεοΩϦ͔͚ΔͷͰخ͍͠ • JSONPରԠͯ͠ͳ͍ͷͰΫϩευϝΠϯରԠ ͢Δࡍ͸஫ҙ͕ඞཁ (I have decided not

    to support JSONP as part of axios.) 　 ということらしい…