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

{%hackmd hMEcK0feT16ZyuC04gKbRw %}

###### tags: `jsdc2020`, `上半場 - 道場`

---
## 現在常見的前後端分離

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

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

### 後端 API 還沒好的幾個方法
* 繼續等待 (跟後端產生嚴重 dependency)
* Express 自己弄
* [JSON server](https://github.com/typicode/json-server) 假資料
* MSW(Mock Service Worker)
* MirageJS

## [MSW (Mock Service Worker)](https://mswjs.io/)

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

### 設定步驟
* 加上 service worker
* 加上 handler

### 好處

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

### 缺點

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

## [MirageJS](https://miragejs.com/)


### 特點
* 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