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

前言

網站開發階段，常常會遇到前端開發時需要模擬呼叫 API 的情境。

用 json-server 來起一個服務是方便測試，但是跟網站是分開的 server，可能會因為忘記把服務開啟而呼叫失敗。

在不用後端介入的情境下，前端用 Vite 整合 Mock Service Worker (MSW) 模擬客製回應是個不錯的選擇。

環境

• Vite 5.x
• Vue 3.4
• MSW 2.x
• Axios 1.x

建立 Vite 專案 (選 Vue 為本篇範例)

npm create vite@latest

切換至專案目錄，增加 msw 及 axios

npm install msw@latest --save-dev
npm install axios --save-dev

前端開發時執行

npm run dev

建立模擬處理器

建立 src/mocks/handlers.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

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

// 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 路徑，即可讀取模擬結果

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，僅能取得到頁面資料而已，如果有解法，歡迎留言討論)