Mock API： Mock Service Worker

Service Worker

MSW 依賴於 Service Worker，Service Worker 本質上是瀏覽器在後臺執行的指令碼，它是完全獨立於它正在處理或服務的網頁。它們充當了 web 應用程式、瀏覽器和網路之間的代理伺服器，目的是為前端應用程式建立一個良好的離線體驗，關於 Service Worker 的更多內容可以參閱《ServiceWorker工作原理、生命週期和使用場景》。而 MSW 就是建立在 Service Worker 的快取機制之上的。

使用 Mock Service Worker

1. 下載依賴包 msw

   npm i msw --save-dev
    
   

2. 執行命令，在 public 資料夾中生成一個 Service Worker 指令碼

   npx msw init public/ --save
   

3. 在src下建立mocks目錄及檔案handlers.ts、browser.ts

   • handlers.ts： 定義API邏輯的程式碼

   • browser.ts： 使用handlers中程式碼，初始化配置 Service Worker

   mkdir src/mocks
   touch src/mocks/handlers.ts src/mocks/browser.ts
   

   • handlers.ts程式碼：

   /* handlers： 主要為定義 API 邏輯的程式碼 */
   import { rest } from 'msw'
   import { nanoid } from 'nanoid' // 設定唯一id
   
   const touristRoutes = [
     {
       id: nanoid(),
       title: '世紀遊輪',
       price: '18150',
       content: '世紀遊輪·世紀傳奇號15天14晚自由行·世紀遊輪2022年江山如此多嬌上海—重慶全覽長江15日遊',
       picUrl: 'https://dimg04.c-ctrip.com/images/300914000000w09uo8773_D_769_510_Q100.jpg',
     },
     {
       id: nanoid(),
       title: '新竹旅遊',
       price: '1727',
       content: '德化石牛山景區+翰林陶瓷體驗館+德化陶瓷博物館+桃仙溪景區桃花島2日1晚私家團',
       picUrl: 'https://dimg04.c-ctrip.com/images/0303v120008xy5w8hA4C6_D_769_510_Q100.jpg',
     }
   ]
   
   // 將初始化資料存入 window.localStorage
   window.localStorage.getItem('touristRoutes') || window.localStorage.setItem('touristRoutes', JSON.stringify(touristRoutes))
   
   export const handlers = [
     rest.get(`/api/touristRoutes/:id`, (req, res, ctx) => {
       const { id } = req.params
       const touristRoutes = JSON.parse(window.localStorage.getItem('touristRoutes') || '')
       const data = touristRoutes.find((item: TouristRoute) => item.id === id)
       if (data) {
         return res(ctx.status(200), ctx.json(data))
       } else {
         return res(ctx.status(500))
       }
     }),
   ]
   
   export const defaultHandlers = []
   
    
   

   • browser.ts程式碼：

   /* browser: 使用handlers中的API程式碼，初始化配置 Service Worker */
   import { setupWorker } from 'msw'
   import { handlers, defaultHandlers } from './handlers'
   
   // This configures a Service Worker with the given request handlers.
   export const mocker = setupWorker(...handlers, ...defaultHandlers)
   

4. 在 main.ts

   或者 index.tsx中新增程式碼，用於開發環境開啟 mock 服務

   if (process.env.NODE_ENV === 'development') {
     const { mocker } = require('mocks/browser')
     mocker.start({
       // 對於沒有 mock 的介面直接通過，避免異常
       onUnhandledRequest: 'bypass',
     })
   }
   

5. 在元件中使用mock資料

   useEffect(() => {
       fetch('/api/touristRoutes/WDXlUhBj81H99VyI4K1TL').then(async res => {
         console.log(res)
         if (res.ok) {
           const data = await res.json()
           console.log(data)
         }
       })
     }, [])