使用Mock Service Worker 进行 mock数据

Mock API： Mock Service Worker

Service Worker

MSW 依赖于 Service Worker，Service Worker 本质上是浏览器在后台运行的脚本，它是完全独立于它正在处理或服务的网页。它们充当了 web 应用程序、浏览器和网络之间的代理服务器，目的是为前端应用程序创建一个良好的离线体验，关于 Service Worker 的更多内容可以参阅《ServiceWorker工作原理、生命周期和使用场景》。而 MSW 就是建立在 Service Worker 的缓存机制之上的。

使用 Mock Service Worker（版本： 0.36.3）

1. 下载依赖包 msw

   npm i msw@0.36.3 --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)
         }
       })
     }, [])