Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSDC2020 - 用 API mocking 讓前端不再苦等待
Search
Huli
October 17, 2020
Programming
0
1.3k
JSDC2020 - 用 API mocking 讓前端不再苦等待
https://github.com/aszx87410/api-mocking-demo-app
簡單介紹 MSW 與 MirageJS
Huli
October 17, 2020
Tweet
Share
More Decks by Huli
See All by Huli
ModernWeb 2018 - 輕鬆應付複雜的非同步操作:RxJS + Redux Observable
aszx87410
0
190
Attacking web without JS - CSS injection
aszx87410
0
3.2k
Front-end Security that Front-end developers don't know
aszx87410
2
5.7k
你懂了 JavaScript,也不懂 JavaScript - MOPCON 2021
aszx87410
3
1.1k
接觸資安才發現前端的水真深 - Modern Web 2021
aszx87410
0
2.4k
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
150
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
520
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
Deep Dive into ~/.claude/projects
hiragram
12
2.4k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
XP, Testing and ninja testing
m_seki
3
230
Featured
See All Featured
Practical Orchestrator
shlominoach
188
11k
Facilitating Awesome Meetings
lara
54
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Done Done
chrislema
184
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Code Review Best Practice
trishagee
69
18k
Music & Morning Musume
bryan
46
6.6k
Transcript
⽤用 API mocking 讓前 端不再苦苦等待 huli
[email protected]
https://blog.huli.tw OneDegree 資深前端⼯工程師
前端 後端 API User
前端 後端 API User
前端 後端 API User 「我要等後端好才能開始接喔」
該怎麼處理理這個狀狀況?
如果後端連 interface 都還沒定好...
http://www.quickmeme.com/meme/3rwr8s
None
幾個⽅方法 • 不管,繼續等待後端
幾個⽅方法 • 不管,繼續等待後端 • Express ⾃自⼰己弄弄
幾個⽅方法 • 不管,繼續等待後端 • Express ⾃自⼰己弄弄 • JSON server 假資料
幾個⽅方法 • 不管,繼續等待後端 • Express ⾃自⼰己弄弄 • JSON server 假資料
• MSW • MirageJS
None
None
登入⾴頁⾯面 後台⾴頁⾯面 是否有 token 是 POST /login 成功之後把 token 寫進
localStorage 並導到後台 否,輸入帳號密碼
登入⾴頁⾯面 確認 localStorage 後台⾴頁⾯面 GET /me 登入⾴頁⾯面 沒 token 有
token 失敗 是否有 token 是 POST /login 成功之後把 token 寫進 localStorage 並導到後台 否,輸入帳號密碼 清除 localStorage
MSW Mock Service Worker
None
前端網站 API Server
前端網站 Service Worker API Server 瀏覽器
設定步驟 • 加上 service worker • 加上 handler
None
None
None
None
還可以針對各種狀狀況 寫測試!
None
None
None
Mirage JS
None
前端網站 API Server
前端網站 fetch XHR API Server JavaScript
None
None
None
寫測試? 當然沒問題
None
None
mirage 的強項
None
None
None
None
總結 cy.route msw mirage 使⽤用在開發上 X O O 使⽤用在測試上 O
O O 特⾊色 cypress 內建 使⽤用 service worker 打造出完整的 mock api 缺點 只能⽤用在測試 設置較⿇麻煩 適合放靜態資料 需要較多時間
https://github.com/aszx87410/api- mocking-demo-app