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.2k
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
140
Attacking web without JS - CSS injection
aszx87410
0
3k
Front-end Security that Front-end developers don't know
aszx87410
2
5.6k
你懂了 JavaScript,也不懂 JavaScript - MOPCON 2021
aszx87410
3
930
接觸資安才發現前端的水真深 - Modern Web 2021
aszx87410
0
2.1k
Other Decks in Programming
See All in Programming
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
440
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.4k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
490
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Docker and Python
trallard
40
3.1k
GraphQLとの向き合い方2022年版
quramy
43
13k
Happy Clients
brianwarren
97
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Code Review Best Practice
trishagee
64
17k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Rails Girls Zürich Keynote
gr2m
93
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Into the Great Unknown - MozCon
thekraken
31
1.5k
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