JSDC2020 - 用 API mocking 讓前端不再苦等待

https://github.com/aszx87410/api-mocking-demo-app

簡單介紹 MSW 與 MirageJS

Transcript

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