## Mock API： Mock Service Worker

簡稱 msw，**提供前端在後台 API 尚未開發完成時模擬 API 呼叫**，啟用 service worker 時於瀏覽器背景運作，攔截前端請求並回應已定義之假資料。

:::success

:bulb: 因為安全性考量，僅允許在 **https 與 localhost** 執行 service worker。

:::

### 一、安裝指令
::: info

npm install msw \-\-save\-dev

:::

### 二、生成腳本
::: info

npx msw init public/ \-\-save

生成結果:

:::

### 三、建立程式碼
1. 於 src 目錄下建立 mocks 目錄，內含 handle.ts、browser.ts 文件

:::info
src
  |---- mocks
    |---- handlers.ts
    |---- browser.ts

- handlers.ts: 撰寫 API 邏輯
- browser.ts: 引用上述 handlers.ts 邏輯，並初始化 service worker

:::

2. 於主程式中撰寫程式碼 (限定開發環境)


### 四、注意事項
1. 需注意 **時間差** 問題，若 msw 尚未啟動完畢即呼叫 mock API，<font color='red'>則會發生 **404 錯誤**</font>。(實際狀況不應該會發生，除非後台掛載 API 有問題)
2. 僅提供**一個分頁**使用，若是多分頁同時開啟 msw 時會<font color='red'>**造成 API 呼叫干擾**</font>，如下圖所示：

---
### 模擬資料庫: @mswjs/data
用來模擬 msw database 的函式庫，可透過 factory 去建構簡單的資料模型，並且提供面向資料的 CURD 功能，支援 RESTful 與 GraphQL 兩種。

https://www.npmjs.com/package/@mswjs/data/v/0.4.0

:::success

1. 支援 一對一 **(非限定)**、一對多、多對一、一對一 **(唯一限定，被指定兩方 entity 互為唯一)** 關聯。
1. 支援 offset-based 與 cursor-based 兩種分頁查詢。
2. 可使用 **drop** 語法卸除資料庫。
3. 可搭配 **faker** 套件建構資料結構與餵入假資料。

:::

### Web DB: IndexedDB
瀏覽器提供的低階 API，可用在客戶端儲存大量的結構化資料。每個網域可存取自己的 IndexedDB 且在 console 的應用程式內檢視。