owned this note   changed 3 years ago  
Published Linked with GitHub

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

歡迎來到 JSDC 2020 上半場 | 道場 (09:00 ~ 12:00) 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/UuG6jn4zR-GfDFGcgVJc-Q

點選主題就可以進到個別場次的共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

tags: jsdc2020, 上半場 - 道場

現在常見的前後端分離

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

該怎麼處理前端必須等待後端 API 好了才可以接的狀況？

如果後端連 interface 都還沒訂好！
無解…(通靈)

後端 API 還沒好的幾個方法

  • 繼續等待 (跟後端產生嚴重 dependency)
  • Express 自己弄
  • JSON server 假資料
  • MSW(Mock Service Worker)
  • MirageJS

MSW (Mock Service Worker)

特點

  • 使用 service worker 實作
  • 會真的發 request，因此在 Dev tool 上看的到

設定步驟

  • 加上 service worker
  • 加上 handler

好處

  • 可以針對各種狀況寫測試

缺點

  • 設置較麻煩，適合放靜態資料

MirageJS

特點

  • request 不會真的發出去， Dev tool 上看不到
  • 也可以寫測試
  • 打造出完整的 mockAPI (CRUD)

好處

  • 提供 ORM，提供一個精簡的 backend server(但沒有真正的 server)

缺點

  • 需要較多時間

Q: mocking 的 interface 是由前端還是後端訂定？

網友A：誰大聲誰贏
網友B：先開先贏

Q: mirage.js 跟自己寫變數的差別在哪？

mirage 提供內建 ORM 幫你快速做這件事

投影片 https://drive.google.com/file/d/1OOV55pClWtNBBM7StU7wepH39-UZb0lM/view
demo 網址 https://github.com/aszx87410/api-mocking-demo-app

Select a repo