$30 off During Our Annual Pro Sale. View Details »

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

Huli
October 17, 2020

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

Huli

October 17, 2020
Tweet

More Decks by Huli

Other Decks in Programming

Transcript

  1. ⽤用 API mocking 讓前
    端不再苦苦等待
    huli

    [email protected]

    View Slide

  2. https://blog.huli.tw
    OneDegree 資深前端⼯工程師

    View Slide

  3. 前端
    後端 API
    User

    View Slide

  4. 前端
    後端 API
    User

    View Slide

  5. 前端
    後端 API
    User
    「我要等後端好才能開始接喔」

    View Slide

  6. 該怎麼處理理這個狀狀況?

    View Slide

  7. 如果後端連 interface
    都還沒定好...

    View Slide

  8. http://www.quickmeme.com/meme/3rwr8s

    View Slide

  9. View Slide

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

    View Slide

  11. 幾個⽅方法
    • 不管,繼續等待後端

    • Express ⾃自⼰己弄弄

    View Slide

  12. 幾個⽅方法
    • 不管,繼續等待後端

    • Express ⾃自⼰己弄弄

    • JSON server 假資料

    View Slide

  13. 幾個⽅方法
    • 不管,繼續等待後端

    • Express ⾃自⼰己弄弄

    • JSON server 假資料

    • MSW

    • MirageJS

    View Slide

  14. View Slide

  15. View Slide

  16. 登入⾴頁⾯面
    後台⾴頁⾯面
    是否有 token

    POST /login
    成功之後把 token

    寫進 localStorage
    並導到後台
    否,輸入帳號密碼

    View Slide

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

    POST /login
    成功之後把 token

    寫進 localStorage
    並導到後台
    否,輸入帳號密碼
    清除 localStorage

    View Slide

  18. MSW
    Mock Service Worker

    View Slide

  19. View Slide

  20. 前端網站
    API

    Server

    View Slide

  21. 前端網站 Service
    Worker
    API

    Server
    瀏覽器

    View Slide

  22. 設定步驟
    • 加上 service worker

    • 加上 handler

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

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

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. Mirage JS

    View Slide

  32. View Slide

  33. 前端網站
    API

    Server

    View Slide

  34. 前端網站 fetch
    XHR
    API

    Server
    JavaScript

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. 寫測試?
    當然沒問題

    View Slide

  39. View Slide

  40. View Slide

  41. mirage 的強項

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. 總結
    cy.route msw mirage
    使⽤用在開發上 X O O
    使⽤用在測試上 O O O
    特⾊色 cypress 內建
    使⽤用

    service worker
    打造出完整的
    mock api
    缺點 只能⽤用在測試
    設置較⿇麻煩

    適合放靜態資料
    需要較多時間

    View Slide

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

    View Slide