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

58d2fa98345951d9a57fdd6cfd5d0f64?s=47 Huli
October 17, 2020

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

58d2fa98345951d9a57fdd6cfd5d0f64?s=128

Huli

October 17, 2020
Tweet

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