前端开发中的 Mock 实践与接口联调技巧

作者 SortWorld

2025年7月22日 20:46

引言

在现代前端开发中，前后端分离架构已经成为主流。然而，这种架构模式也带来了一个挑战：前端开发往往需要等待后端提供接口才能进行联调。为了解决这个问题，Mock 技术应运而生。通过使用Mock,前端可以在没有真实接口的情况下进行开发和测试，从而提升开发效率并减少等待时间。
本文将深入探讨如何在 React 项目中使用 vite-plugin-mock 实现 Mock 接口，并结合 Apifox 工具进行接口测试，最终实现与真实接口的无缝对接。

一、传统前后端分离开发模式

在传统的前后端分离架构中，前端通常使用 React、Vue 等框架进行开发，而后端则采用 Java、Node.js、Go 等语言构建服务。前后端通过 RESTful API 或 GraphQL 进行通信。

前端开发痛点：

后端接口尚未完成时，前端无法进行联调。
接口返回格式不统一，导致前端处理逻辑复杂。
联调过程中容易受到后端服务不稳定的影响。

解决方案：

使用 Mock 技术模拟接口数据。
前端自定义接口响应格式，提升开发效率。
使用 Apifox、Postman 等工具进行接口调试。

二、mock是什么？

Mock 是指在开发过程中，使用虚拟数据模拟后端接口的行为。它可以帮助前端在没有真实接口的情况下进行开发和测试。

1.安装依赖

// 在开发依赖当中下载mock工具
pnpm i vite-plugin-mock -D

2.配置环境

当下载完之后在工具包当中将viteMockServe解构出来，并且在vite当中配置该工具包，使其具备自行模拟数据请求的能力。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path' 
// 服务器端 mock 模拟下
// vite 前端模拟服务器 准备好了插件
// 前后端分离 不能等后端接口写好了，前端先起来
import {
  viteMockServe
} from 'vite-plugin-mock'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true,
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },  
})

3.为何需要mock?

服务器端mock模拟状态下，前端伪接口，axios/api 请求
不能等后端接口写好了再调用接口，前端先写起来,并且在写前端的过程当中可以自行模拟数据请求，

4.使用场景

在前后端分离的项目中，后端接口尚未完成时，前端可以使用 viteMockServe 模拟接口数据进行开发。
在单元测试中，可以使用模拟数据来验证前端逻辑是否正确。
在调试过程中，可以通过修改模拟数据快速验证不同场景下的应用行为。

三、实战源码

1.mock接口

在主文件当中创建mock文件夹，并且在其中创建test.js文件开始编写伪数据，下面的代码就是咱们已经写好的test接口请求。接下来将咱们的文件源码跑起来，并向这个地址发送请求，观察使用的虚拟模拟api当中是否会拿到相应的源码内容（需要用到Apifox）

export default [
  {
    url: '/api/todos',
    method: 'get',
    response:() => {
      const todos = [
        {
          id: 1,
          title: 'todo1',
          completed: false, // completed是一个布尔类型的属性
        },
        {
          id: 2,
          title: 'todo2',
          completed: true, // 表示这个 todo 已经完成
        }
      ]
      return {
        code: 0, // 没有错误
        data: todos,
        message: 'success'
      }
    }
  }
]

2.Apifox测试

让我们启动该软件，并且在软件当中发送快捷请求，当在发送请求当中输入咱们本地创建的服务器，可以看到轻松拿到接口请求的结果了，这也意味着咱们请求成功啦！

3.小结

前端在后端接口未完成时可使用 Mock 数据进行开发。
使用 vite-plugin-mock 可快速搭建 Mock 服务。
接口文件格式固定，需包含 url、method 和 response。

四、实战案例(请求到github仓库)

1.简单测试

当我们将接口请求换成repos,并且修改自己代码中的test可以看到页面当中的效果。这时候咱们就会有两个接口，这时候咱们向自己新定义的接口发送请求，可以看到Apifox当中的数据测试内容。

export default [
    {
        url: '/api/todos',
        method: 'get',
        response: () => {
            const todos = [
                {
                    id: 1,
                    title: 'todo1',
                    completed: false,
                },
                {
                    id: 2,
                    title: 'todo2',
                    completed: true,
                }
            ]
            return {
                code: 0, // 没有错误
                message: 'success',
                data: todos,
            }
        }
    },
    {
        url: '/api/repos',
        method: 'get',
        response: () => {
            const repos = [
                {
                    id: 695370163,
                    title: 'ai_lesson',
                    description: "AI全栈工程师课程",
                },
                {
                    id: 152578450,
                    title: 'AlloyFinger',
                    description: "super tiny size multi-touch gestures library for the web. 　　　You can touch this",
                }
            ]
            return {
                code: 0, // 没有错误
                message: 'success',
                data: repos,
            }
        }
    },
]

2.config文件

// 标准的http请求库， vue/react 都用它
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:5173'
export default axios;

统一管理：将axios的引入和配置集中到一个文件中，便于全局管理和维护。
简化使用：其他模块只需导入该配置文件即可使用axios，而不需要重复引入和配置。
可扩展性：如果后续需要对axios进行全局配置（如设置默认请求头、请求拦截、响应拦截等），可以在该文件中进行统一处理，而不影响其他代码。

3.index文件

import axios from './config'
// todos接口
export const getTodos = () => {
  return axios.get('/api/todos')
}

export const getRepos = () => {
  return axios.get('/api/repos')
}

getTodos函数的作用是向后端发起GET请求，获取待办事项列表。它封装了具体的API请求逻辑，前端组件或业务代码只需调用该函数即可。除了getTodos，代码中还定义了getRepos函数，用于获取仓库数据。这表明该文件是统一管理前端API请求的地方，便于维护和修改。

4.效果展示通过 Apifox 测试接口返回数据，并在页面上成功渲染 GitHub 仓库信息。

咱们需要根据接口联调请求回来的数据在App当中请求查看其中的文档内容，当我们去主页面查看打印结果的时候可以发现代码当中存在需要的数据内容。

import {
  useState,
  useEffect
} from 'react'
import './App.css'
import {
  getTodos,
  getRepos
} from '@/api'


function App() {
  const [todos, setTodos] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      const todosResult = await getTodos()
      console.log(todosResult);
      setTodos(todosResult.data.data)
    }
    fetchData()
  }, [])

  return (
    <>

    </>
  )
}

export default App

接下来咱们只需要根据主页当中拿到的数据内容进一步进行页面渲染，选择适合自己的页面数据，将需要的数据渲染在页面当中。可以看到需要的数据在data.data当中，同样的根据代码模版内容，Repos的代码是与Todos的代码格式是相同的。

  return (
    <>
      {
        todos.map(todo => (
        // key 不能是索引
          <div key={todo.id}>
            {todo.title}
          </div>
        ))
      }
    </>
  )
}

当我们将在线链接换成咱们自己的github仓库就可以实现发送真正的数据请求。

// 标准的http请求库， vue/react 都用它
import axios from 'axios'
// axios.defaults.baseURL = 'http://localhost:5173'
// 线上地址有了
axios.defaults.baseURL = 'https://api.github.com/users/shunwuyu'
export default axios;

import axios from './config'
// todos接口
//export const getTodos = () => {
//  return axios.get('/api/todos')
//}

export const getRepos = () => {
  return axios.get('/repos')
}

import {
  useState,
  useEffect
} from 'react'
import './App.css'
import {
  getTodos,
  getRepos
} from '@/api'


function App() {
  const [todos, setTodos] = useState([])
  const [repos, setRepos] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      // const todosResult = await getTodos()
      // console.log(todosResult);
      // setTodos(todosResult.data.data)
      const reposResult = await getRepos()
      console.log(reposResult);
      setRepos(reposResult.data)
    }
    fetchData()
  }, [])

  return (
    <>
      {
        repos.map(repo => (
          <div key={repo.id}>
            {repo.title}
            {repo.description}
          </div>
        ))
      }
    </>
  )
}

export default App

当我们能够熟练运用上述三段代码使用的技巧，接口联调的内容基本上就已经掌握。

五、总结

在前后端分离开发中，Mock技术是前端开发的重要工具。通过 vite-plugin-mock，我们可以轻松实现接口模拟，提升开发效率。结合Apifox进行接口测试，可以确保前端逻辑的正确性。最终，通过统一的API封装和Axios配置，实现与真实接口的无缝对接。

普通视图

引言