后端接口还没做完怎么办？前端要等着后端做完吗？

有的时候，后端的接口还没有做完，前端接受不到后端传来的数据和接口，该怎么办？难道我们要等着后端做完，前端才开始工作吗？

这样不行，到时项目进度会被拖后腿。老板都要炒我们前端的鱿鱼了。

这时，我们前端要学会自己造个简易的接口，也被称作模拟一个接口，即 mock

一、什么是Mock

Mock（模拟）是前端开发中一种重要的技术手段，它通过创建模拟数据和接口来模拟后端服务的行为。在前后端分离的开发模式中，Mock可以帮助前端开发者在后端接口未完成的情况下独立进行开发和测试，提高开发效率并降低对后端环境的依赖。

二、在React项目中集成Mock（以demo为例）

2.1 项目结构

本项目使用Vite作为构建工具，并通过 vite-plugin-mock 实现Mock功能，核心文件结构如下：

demo/
├── mock/
│   └── text.js  # 模拟数据定义
├── src/
│   ├── App.jsx  # 主组件
└── vite.config.js  # Vite 配置文件

2.2 安装与配置 3.2.1 安装依赖

在项目中安装 vite-plugin-mock ：

npm install vite-plugin-mock -D
# 或使用pnpm
pnpm i vite-plugin-mock -D

2.2.2 配置Vite

在 vite.config.js 中添加Mock插件配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'
import path from 'path'

export default defineConfig({
  plugins: [
    react(),
    viteMockServe({
      mockPath: 'mock',      // 指定Mock文件存放目录
      localEnabled: true,    // 开发环境启用Mock
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

三、编写Mock接口

在 mock 目录下创建接口定义文件，以 text.js 为例：

export default [
    {
        url: '/repos',
        method: 'get',
        response: () => {
            const repos = [
                {
                    id: 695370163,
                    title: 'CS',
                    description: "couterstar",
                },
                {
                    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,
            }
        }
    },
]

四、在组件中使用Mock接口

在React组件（如 App.jsx ）中调用Mock接口：

import { 
  useState, 
  useEffect 
} from 'react'
import './App.css'
import {
  getRepos,
} from '@/api'
function App() {
  const [repos,setRepos] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const reposResult = await getRepos();
      console.log(reposResult);
      setRepos(reposResult.data.data);
    }
    fetchData();
  },[])
  
  return (
        <ul>
          {
            repos.map(repo => {
              return (
              <li key={repo.id}>
                {repo.title} <br/>
                {repo.description}
              </li>
              )
            }) 
          }
      </ul>
    </>
  )
}

export default App

五、查看接口效果

数据成功传入，以后再也不用担心后端还没做完，前端就必须停滞的问题了，又得起来工作了（悲）。