×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
⽤用 API mocking 讓前 端不再苦苦等待 huli
[email protected]
Slide 2
Slide 2 text
https://blog.huli.tw OneDegree 資深前端⼯工程師
Slide 3
Slide 3 text
前端 後端 API User
Slide 4
Slide 4 text
前端 後端 API User
Slide 5
Slide 5 text
前端 後端 API User 「我要等後端好才能開始接喔」
Slide 6
Slide 6 text
該怎麼處理理這個狀狀況？
Slide 7
Slide 7 text
如果後端連 interface 都還沒定好...
Slide 8
Slide 8 text
http://www.quickmeme.com/meme/3rwr8s
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
幾個⽅方法 • 不管，繼續等待後端
Slide 11
Slide 11 text
幾個⽅方法 • 不管，繼續等待後端 • Express ⾃自⼰己弄弄
Slide 12
Slide 12 text
幾個⽅方法 • 不管，繼續等待後端 • Express ⾃自⼰己弄弄 • JSON server 假資料
Slide 13
Slide 13 text
幾個⽅方法 • 不管，繼續等待後端 • Express ⾃自⼰己弄弄 • JSON server 假資料 • MSW • MirageJS
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
登入⾴頁⾯面 後台⾴頁⾯面 是否有 token 是 POST /login 成功之後把 token 寫進 localStorage 並導到後台 否，輸入帳號密碼
Slide 17
Slide 17 text
登入⾴頁⾯面 確認 localStorage 後台⾴頁⾯面 GET /me 登入⾴頁⾯面 沒 token 有 token 失敗 是否有 token 是 POST /login 成功之後把 token 寫進 localStorage 並導到後台 否，輸入帳號密碼 清除 localStorage
Slide 18
Slide 18 text
MSW Mock Service Worker
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
前端網站 API Server
Slide 21
Slide 21 text
前端網站 Service Worker API Server 瀏覽器
Slide 22
Slide 22 text
設定步驟 • 加上 service worker • 加上 handler
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
還可以針對各種狀狀況 寫測試！
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Mirage JS
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
前端網站 API Server
Slide 34
Slide 34 text
前端網站 fetch XHR API Server JavaScript
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
寫測試？ 當然沒問題
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
mirage 的強項
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
總結 cy.route msw mirage 使⽤用在開發上 X O O 使⽤用在測試上 O O O 特⾊色 cypress 內建 使⽤用 service worker 打造出完整的 mock api 缺點 只能⽤用在測試 設置較⿇麻煩 適合放靜態資料 需要較多時間
Slide 47
Slide 47 text
https://github.com/aszx87410/api- mocking-demo-app