HackMDHuli - 用 API mocking 讓前端不再苦苦等待
tags: jsdc2020, 上半場 - 道場
現在常見的前後端分離
該怎麼處理前端必須等待後端 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
