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

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

9. None

10. 幾個⽅方法 • 不管，繼續等待後端

11. 幾個⽅方法 • 不管，繼續等待後端 • Express ⾃自⼰己弄弄

12. 幾個⽅方法 • 不管，繼續等待後端 • Express ⾃自⼰己弄弄 • JSON server 假資料

13. 幾個⽅方法 • 不管，繼續等待後端 • Express ⾃自⼰己弄弄 • JSON server 假資料

    • MSW • MirageJS
14. None
15. None

16. 登入⾴頁⾯面 後台⾴頁⾯面 是否有 token 是 POST /login 成功之後把 token
 寫進

    localStorage 並導到後台 否，輸入帳號密碼

17. 登入⾴頁⾯面 確認 localStorage 後台⾴頁⾯面 GET /me 登入⾴頁⾯面 沒 token 有

    token 失敗 是否有 token 是 POST /login 成功之後把 token
 寫進 localStorage 並導到後台 否，輸入帳號密碼 清除 localStorage

18. MSW Mock Service Worker

19. None

20. 前端網站 API
 Server

21. 前端網站 Service Worker API
 Server 瀏覽器

22. 設定步驟 • 加上 service worker • 加上 handler

23. None
24. None
25. None
26. None

27. 還可以針對各種狀狀況 寫測試！

28. None
29. None
30. None

31. Mirage JS

32. None

33. 前端網站 API
 Server

34. 前端網站 fetch XHR API
 Server JavaScript

35. None
36. None
37. None

38. 寫測試？ 當然沒問題

39. None
40. None

41. mirage 的強項

42. None
43. None
44. None
45. None

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