[Vite] 前端開發模擬 API 的好物 Mock Service Worker (MSW)

markdown ### 前言 網站開發階段，常常會遇到前端開發時需要模擬呼叫 API 的情境。 用 json-server 來起一個服務是方便測試，但是跟網站是分開的 server，可能會因為忘記把服務開啟而呼叫失敗。 在不用後端介入的情境下，前端用 Vite 整合 Mock Service Worker (MSW) 模擬客製回應是個不錯的選擇。 ### 環境 - Vite 5.x - Vue 3.4 - MSW 2.x - Axios 1.x 建立 Vite 專案 (選 Vue 為本篇範例) ```bash npm create vite@latest ``` 切換至專案目錄，增加 msw 及 axios ```bash npm install msw@latest --save-dev npm install axios --save-dev ``` 前端開發時執行 ``` npm run dev ``` ### 建立模擬處理器 建立 `src/mocks/handlers.js` ```js import { http } from 'msw'; export const handlers = [ // 設定 mocking response http.get('/api/hello', () =＞ { return new Response('Hello, World!') }), ] ``` 參考連結：Mocking responses 模擬回應 ### 設定 worker 整合瀏覽器環境 建立 `src/mocks/browser.js` ```js import { setupWorker } from 'msw/browser' import { handlers } from './handlers' export const worker = setupWorker(...handlers) ``` 執行以下指令在 public 資料夾產生 `mockServiceWorker.js` 檔案 ``` npx msw init public --save ``` 參考連結：Browser integration 整合瀏覽器 ### 啟用 worker 在 `src/main.js` 設定啟用 worker ```js // src/main.js import { createApp } from 'vue' import App from './App.vue' async function enableMocking() { if (!import.meta.env.DEV) { return } const { worker } = await import('./mocks/browser') return worker.start() } enableMocking().then(() =＞ { createApp(App).mount('#app') }) ``` 以上的作法是為了確實啟用 worker 後才載入前端的應用。 在瀏覽器的開發者工具的主控台若看到 `[MSW] Mocking enabled.` 的訊息，即表示 MSW 模擬已啟用。 ### 使用 Axios 呼叫 API 利用在 handlers 設定的 get 方法讀取 /api/hello 路徑，即可讀取模擬結果 ```js import axios from 'axios'; axios.get('/api/hello') .then(function (response) { console.log(response.data) }) ``` 在 Console 即可檢視執行的結果

範例程式：[GitHub] demo-vite-msw ### 結語 針對前端的 API 模擬呼叫測試，不介入後端程式的情境下，比較 json-server 及 MSW 的想法： - json-server：好處是直接回應需要的資料，而且可以用 .http 來做文件記錄；缺點則是沒有客製回應，且需另外開服務 - MSW：好處是可以跟前端開發的網站整合，只需開一個服務，並且可以依要求或參數來做客製的回應；缺點是無法透過像 Postman 來做測試，也就是無法用 .http 文件來做版控 (目前試了很久都無法測 mock api，僅能取得到頁面資料而已，如果有解法，歡迎留言討論)