利用 AI + MSW 实现高效的前端 Mock 数据开发

背景介绍
[MSW 介绍](#MSW 介绍 "#msw-%E4%BB%8B%E7%BB%8D")
安装与配置
[在 Vue 项目中集成](#在 Vue 项目中集成 "#%E5%9C%A8-vue-%E9%A1%B9%E7%9B%AE%E4%B8%AD%E9%9B%86%E6%88%90")
[利用 AI 生成 Mock 数据](#利用 AI 生成 Mock 数据 "#%E5%88%A9%E7%94%A8-ai-%E7%94%9F%E6%88%90-mock-%E6%95%B0%E6%8D%AE")
实际应用场景
最佳实践

背景介绍

在前端开发中，我们经常需要在后端 API 尚未完成时进行开发和测试。Mock 数据能够帮助我们独立于后端进行开发，提高效率并减少阻塞。传统的 Mock 方式通常存在以下问题：

手动编写 Mock 数据耗时且容易出错
与实际 API 的请求方式不一致
切换真实/模拟环境复杂
同步更新 Mock 数据与 API 变更困难

MSW (Mock Service Worker) 结合 AI 生成数据可以优雅地解决这些问题。

MSW 介绍

MSW 是一个 API 模拟库，它在 Service Worker 层拦截网络请求，使开发者能够模拟任何 API 响应，而无需修改应用代码或设置服务器。

主要优势：

无缝集成 - 不需要修改应用代码或 API 调用
逼真的网络行为 - 可以模拟网络延迟、错误等
同时支持浏览器和 Node.js - 可用于测试和开发
无需模拟服务器 - 直接在前端实现
易于切换 - 从模拟到实际 API 无需代码更改

安装与配置

1. 安装 MSW

bash 复制代码

# 使用 npm
npm install msw --save-dev

# 或使用 yarn
yarn add msw --dev

2. 初始化 Service Worker

MSW 需要一个 Service Worker 文件来拦截网络请求：

bash 复制代码

# 初始化 Service Worker 到 public 目录
npx msw init public/ --save

3. 创建基础文件结构

在项目中创建以下文件:

src/mocks/browser.js - 浏览器环境配置
src/mocks/handlers.js - 请求拦截处理器
src/mocks/mockData.js - 模拟数据生成
src/mocks/index.js - 统一导出

4. 编写基础配置文件

browser.js:

javascript 复制代码

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

// 创建 worker 实例
const worker = setupWorker(...handlers)

// 导出启动函数
export function startWorker() {
  worker.start({
    onUnhandledRequest: 'bypass'
  })
  
  console.log('[MSW] Mock Service Worker 已启动')
  return worker
}

// 导出 worker 实例
export { worker }

handlers.js:

javascript 复制代码

import { http, HttpResponse } from 'msw'
import { generateMockData } from './mockData'

export const handlers = [
  // 示例: GET 请求处理
  http.get('https://api.example.com/users', ({ request }) => {
    const url = new URL(request.url)
    // 获取查询参数
    const page = url.searchParams.get('page') || '1'
    
    // 生成响应数据
    const data = generateMockData.users(parseInt(page))
    
    return HttpResponse.json(data)
  }),
  
  // 可以添加更多处理器...
]

mockData.js:

javascript 复制代码

// 简单的模拟数据生成器
export const generateMockData = {
  users: (page = 1) => {
    // 这里放置生成用户数据的逻辑
    return {
      page,
      results: [/* 模拟数据 */],
      total: 100
    }
  }
  // 其他类型的数据生成器...
}

在 Vue 项目中集成

1. 在入口文件中初始化 MSW

main.js:

javascript 复制代码

import Vue from 'vue'
import App from './App.vue'
// 其他导入...

// 只在开发环境启动 mock
if (process.env.NODE_ENV === 'development') {
  import('./mocks/browser')
    .then(({ startWorker }) => startWorker())
    .catch(error => console.error('[MSW] 启动失败:', error))
}

new Vue({
  render: h => h(App)
}).$mount('#app')

2. 创建一个环境控制开关（可选）

通过环境变量或 localStorage 控制是否启用 mock:

javascript 复制代码

// main.js 中替换上面的条件
const enableMocks = process.env.NODE_ENV === 'development' && 
                    (process.env.VUE_APP_ENABLE_MOCKS === 'true' || 
                     localStorage.getItem('useMocks') !== 'false')

if (enableMocks) {
  import('./mocks/browser')
    .then(({ startWorker }) => startWorker())
    .catch(error => console.error('[MSW] 启动失败:', error))
}

3. 添加 Mock 控制器组件（可选）

创建一个组件，用于在开发时切换 mock 状态：

javascript 复制代码

<template>
  <div class="mock-controller" v-if="isDevelopment">
    <label>
      <input type="checkbox" v-model="useMocks" @change="toggleMocks">
      使用模拟数据
    </label>
  </div>
</template>

<script>
export default {
  name: 'MockController',
  data() {
    return {
      isDevelopment: process.env.NODE_ENV === 'development',
      useMocks: localStorage.getItem('useMocks') !== 'false'
    }
  },
  methods: {
    toggleMocks() {
      localStorage.setItem('useMocks', this.useMocks)
      setTimeout(() => window.location.reload(), 300)
    }
  }
}
</script>

<style scoped>
.mock-controller {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  z-index: 9999;
}
</style>

4. 使用 Vue Query 进行数据获取

结合 MSW 和 Vue Query（TanStack Query 的 Vue 版本）可以实现优雅的异步状态管理：

javascript 复制代码

<script>
import { queryInvitationSet } from '@/api/live'
import { useQuery } from 'zan-mixin-query'

export default {
  name: 'AiDemo',
  setup() {
    // 获取直播邀请榜设置
    const { data: invitationSetData = {}, isLoading: isInvitationLoading } = useQuery({
      queryKey: ['getInvitationSet'],
      queryFn: () => queryInvitationSet({
        liveRoomId: 467
      }).then(res => {
        console.log(res, 'res')
        return res.data?.body || {}
      })
      // refetchInterval: 10000
    })

    return {
      invitationSetData,
      isInvitationLoading
    }
  }
}
</script>

<template>
  <div>1</div>
</template>

利用 AI 生成 Mock 数据

1. 准备工作

要使用 AI 生成 Mock 数据，您需要：

后端 API 的接口文档（字段名、类型、描述等）
接口的响应格式示例

2. 设计高效的 AI 提示词

创建有效的提示词是获取高质量 mock 数据的关键：

请根据以下 API 接口的字段定义，生成符合规范的 JavaScript mock 数据生成函数: 接口名称: [接口名称] 字段定义: [字段名1]: [类型], [描述], [示例值] [字段名2]: [类型], [描述], [示例值] ... 响应格式: [提供一个示例 JSON 响应] 请创建一个函数，它应该: 生成符合上述字段定义的随机数据支持分页参数 (page, pageSize) 返回与示例响应格式一致的数据结构数据应该真实合理，避免明显的假数据模式请仅返回 JavaScript 代码，使用 ES6+ 语法，不需要其他解释。

3. 实际使用案例

将后端 API 文档或截图提供给 AI，例如：

然后请求 AI 生成对应的 mock 数据生成函数，将结果放入 mockData.js 中：

javascript 复制代码

// src/mocks/mockData.js
export function generateInvitationData(count = 10) {
  return Array.from({ length: count }, (_, index) => ({
    createAt: formatDate(new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000)),
    inviteeAgentId: 10000 + Math.floor(Math.random() * 90000),
    inviteeHeading: `https://randomuser.me/api/portraits/${index % 2 ? 'men' : 'women'}/${(index % 10) + 1}.jpg`,
    inviteeOrderId: `ORDER${Date.now()}${index}`,
    inviteeNick: `用户${index + 1}`,
    inviteePhone: generateRandomPhone(),
    watchTime: formatDate(new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000)),
    isPlaceOrder: Math.random() > 0.5
  }))
}

export function generateInvitationResponse(liveRoomId, page = 1, pageSize = 10) {
  const totalCount = 35; // 总记录数
  const records = generateInvitationData(Math.min(pageSize, totalCount - (page - 1) * pageSize));
  
  return {
    code: 0,
    message: "操作成功",
    description: "查询邀请集合成功",
    traceId: `trace-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
    body: {
      searchCount: true,
      pages: Math.ceil(totalCount / pageSize),
      records: records,
      total: totalCount,
      size: pageSize,
      current: page
    }
  }
}

// 辅助函数...
function formatDate(date) {
  // 日期格式化逻辑...
}

function generateRandomPhone() {
  // 手机号生成逻辑...
}

4. 创建请求处理器

然后在 handlers.js 中添加对应的请求处理器：

javascript 复制代码

// src/mocks/handlers.js
import { http, HttpResponse } from 'msw'
import { generateInvitationResponse } from './mockData'

export const handlers = [
  http.get('https://***api***/micro/live-video/volcano/queryInvitationSet', ({ request }) => {
    const url = new URL(request.url)
    const liveRoomId = url.searchParams.get('liveRoomId') || '0'
    const page = parseInt(url.searchParams.get('page') || '1')
    const pageSize = parseInt(url.searchParams.get('pageSize') || '10')
    
    console.log(`[MSW] 拦截到请求: queryInvitationSet, liveRoomId: ${liveRoomId}, page: ${page}, pageSize: ${pageSize}`)
    
    // 生成响应数据
    const responseData = generateInvitationResponse(liveRoomId, page, pageSize)
    
    return HttpResponse.json(responseData)
  })
]

实际应用场景

场景一：开发新功能而后端 API 尚未就绪

从产品/设计获取需求和 UI 设计
与后端开发人员讨论并获取 API 接口文档
使用 AI 生成 mock 数据函数
配置 MSW 拦截相关 API 请求
完成前端开发和测试
当后端 API 就绪时，简单关闭 mock 即可连接真实接口

场景二：测试不同 API 响应状态

javascript 复制代码

// 为同一个 API 配置不同响应
http.get('https://api.example.com/data', ({ request }) => {
  // 使用查询参数模拟不同状态
  const url = new URL(request.url)
  const scenario = url.searchParams.get('scenario') || 'success'
  
  switch (scenario) {
    case 'error':
      return HttpResponse.json(
        { error: "服务器错误" },
        { status: 500 }
      )
    case 'empty':
      return HttpResponse.json({ data: [] })
    case 'loading':
      // 模拟长时间加载
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(HttpResponse.json({ data: generateMockData() }))
        }, 5000)
      })
    default:
      return HttpResponse.json({ data: generateMockData() })
  }
})

最佳实践

1. 组织化的 Mock 数据结构

按照资源或功能模块组织 mock 数据生成函数：

javascript 复制代码

// src/mocks/mockData/user.js
export function generateUserData() { /* ... */ }

// src/mocks/mockData/product.js
export function generateProductData() { /* ... */ }

// src/mocks/mockData/index.js
export * from './user'
export * from './product'
// ...

2. 模拟网络延迟和错误

javascript 复制代码

http.get('https://api.example.com/data', async () => {
  // 随机模拟延迟 (200ms-1500ms)
  await new Promise(r => setTimeout(r, 200 + Math.random() * 1300))
  
  // 随机模拟错误 (10% 概率)
  if (Math.random() < 0.1) {
    return HttpResponse.json(
      { error: "服务器错误" },
      { status: 500 }
    )
  }
  
  return HttpResponse.json({ data: generateMockData() })
})

3. 使用 localStorage 保存表单状态

javascript 复制代码

// 在 POST 请求中存储数据
http.post('https://api.example.com/users', async ({ request }) => {
  const newUser = await request.json()
  
  // 获取现有数据
  const existingUsers = JSON.parse(localStorage.getItem('mockUsers') || '[]')
  
  // 添加新用户并分配 ID
  newUser.id = Date.now()
  existingUsers.push(newUser)
  
  // 保存回 localStorage
  localStorage.setItem('mockUsers', JSON.stringify(existingUsers))
  
  return HttpResponse.json({ success: true, data: newUser }, { status: 201 })
})

// 在 GET 请求中获取数据
http.get('https://api.example.com/users', () => {
  const users = JSON.parse(localStorage.getItem('mockUsers') || '[]')
  return HttpResponse.json({ data: users })
})

4. 创建请求验证

javascript 复制代码

http.post('https://api.example.com/login', async ({ request }) => {
  const credentials = await request.json()
  
  // 验证凭据
  if (credentials.username === 'admin' && credentials.password === 'password') {
    return HttpResponse.json({
      success: true,
      token: 'mock-jwt-token',
      user: { id: 1, name: 'Admin User', role: 'admin' }
    })
  }
  
  return HttpResponse.json(
    { success: false, message: '用户名或密码错误' },
    { status: 401 }
  )
})

结论

利用 AI + MSW 进行 mock 数据开发不仅能极大提高前端开发效率，还能确保开发与测试更加逼真和可靠。这种方法的主要优势包括：

开发效率 - 快速生成符合接口规范的 mock 数据
独立性 - 前端开发不再依赖后端 API 完成情况
真实性 - 模拟真实的网络请求和响应
灵活性 - 轻松测试各种边界情况和错误处理
平滑过渡 - 从 mock 到真实 API 无缝切换