Mock与useMock

一、什么是Mock？

前后端分离架构下，前端负责页面渲染与交互逻辑，后端提供接口返回业务数据。但项目开发前期，后端接口往往还没开发完成，前端拿到接口文档后却没有可调用的接口，页面写好了也无法调试数据渲染、表单提交、分页等交互逻辑。

Mock就是用来解决这个问题的技术。 Mock的核心思想：模拟后端接口，拦截前端的网络请求，返回预先定义好的模拟数据。它会完全模拟真实接口的行为：支持GET、POST等请求方法，可以自定义返回的JSON数据、HTTP状态码、接口响应延迟，还能构造异常返回结果，比如500报错、空数据、权限不足等。

前端代码不用做特殊改造，发起请求的写法和调用真实后端接口完全一致。开发时请求Mock接口，等到后端接口开发完成，只需要修改接口基础地址，就能无缝切换到真实接口，不用大面积改动业务代码。

Mock在前端的价值：

前端可以并行开发，不用等待后端接口开发完毕，实现前后端并行开发，缩短项目周期；
可以人为构造各种边界和异常场景，方便前端单独调试异常处理逻辑；
本地开发不受后端服务稳定性、环境部署的影响；
接口文档变更时，可以快速修改模拟返回数据，提前适配新字段。

二、useMock平台介绍

useMock是一款在线Mock平台，专门服务前端开发，不用在本地启动服务、编写大量mockjs配置代码，直接在网页端可视化创建和管理接口。

useMock核心功能：

可视化创建接口，支持GET、POST、PUT、DELETE等常用请求方式，配置接口路径、请求参数；
内置模板快速生成模拟数据，一键生成姓名、手机号、ID、时间、随机数字、数组等业务数据；
自定义响应结果，支持固定JSON结构，也可以混合随机动态数据；
支持模拟异常状态，配置404、500等错误码，模拟接口报错；
支持设置响应延迟，模拟网络慢的场景，用来调试loading、防抖节流；
生成独立接口地址，前端项目直接通过http请求访问。

三、useMock平台前端实战

3.1 在useMock中创建模拟接口

我们以业务常用的用户分页列表接口举例。新增接口，填写基础信息：接口名称：用户列表查询请求方式：GET 接口路径：/api/user/list 描述：分页获取用户列表

配置响应JSON示例：

复制代码

{
  "code": 200,
  "msg": "请求成功",
  "data": {
    "total": 86,
    "page": 1,
    "size": 10,
    "list": [
      {
        "id": "@increment",
        "username": "@cname",
        "phone": "@phone",
        "createTime": "@datetime",
        "status": "@pick([0,1])"
      }
    ]
  }
}高级配置：设置响应延迟300~800ms，模拟真实网络请求。 保存接口后，平台会生成完整的接口请求地址，前端直接调用这个地址即可。

3.2 前端项目对接useMock接口

下面基于axios封装请求，Vue、React等项目都可以使用。

1. 配置环境变量区分环境

.env.development（开发环境，使用useMock）

复制代码

VITE_API_BASE_URL = "useMock生成的接口基础地址"

.env.production（生产环境，使用真实后端接口）

复制代码

VITE_API_BASE_URL = "后端真实接口地址"

2. 封装axios请求实例

vue 复制代码

import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在这里统一添加token、请求头
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  res => {
    return res.data
  },
  error => {
    console.log('接口请求失败', error)
    return Promise.reject(error)
  }
)

export default service

3. 封装接口方法并在页面调用

复制代码

import request from '@/utils/request'

// 获取用户列表接口
export const getUserList = (params) => {
  return request({
    url: '/api/user/list',
    method: 'GET',
    params
  })
}

// 页面业务代码调用
const getList = async () => {
  const res = await getUserList({ page: 1, size: 10 })
  if(res.code === 200) {
    tableData.value = res.data.list
    total.value = res.data.total
  }
}

到这里，前端项目就成功对接useMock接口，可以正常请求数据渲染页面，调试分页、列表渲染等逻辑。

四、useMock在前端的核心应用场景

4.1 项目前期并行开发

后端接口还未开发完成时，前端根据接口文档，在useMock上搭建整套模拟接口。前端可以独立完成页面编写、表单逻辑、列表分页、弹窗交互等全部开发工作，不用等待后端，实现前后端并行开发，提升项目整体进度。

4.2 调试异常与边界场景

开发时很容易只处理接口成功的场景，忽略报错情况。借助useMock，我们可以手动构造500服务错误、404、空数组返回、权限错误等场景，专门调试前端的错误提示、空页面、异常兜底逻辑，提升代码健壮性。

4.3 模拟弱网，调试loading、防抖节流

本地开发环境网络速度很快，loading状态一闪而过，很难调试。useMock支持设置响应延迟，模拟网络卡顿。可以用来测试页面loading展示与关闭、搜索框防抖、提交按钮节流等交互效果。

4.4 辅助前后端联调定位问题

联调阶段出现接口报错时，可以快速切换地址对比：

Mock接口返回正常，真实接口异常：问题偏向后端；
Mock接口报错，真实接口正常：问题大概率是前端参数处理、请求逻辑问题。快速区分问题归属，减少联调排查时间。

五、总结

useMock在线Mock平台，无需本地搭建服务，可视化快速创建模拟接口，是前端实现并行开发的实用工具。

合理使用Mock + useMock平台，可以帮助前端工程师：

摆脱后端接口进度约束，实现前后端并行开发；
覆盖各种异常、弱网场景，完善前端容错逻辑；
简化Mock配置，不用维护本地mockjs文件，开箱即用；
加速联调，快速定位前后端问题边界。