预备秋招面试之Mock.js

在现代前后端分离的环境下，我们作为前端工程师在做前端时通常前端需要在后端给出真实的接口之前我们需要自己伪造一个接口。我将从以下几点带你了解Mock.js。

🧠 一、基础理解类问题（考察你是否真正理解 mock.js 是什么）

1. 你了解 mock.js 吗？它主要解决什么问题？

Mock.js 是一个用于前端开发的模拟数据生成库。
它可以帮助前端在没有后端接口的情况下模拟接口数据，提升开发效率。
主要解决前后端分离开发时接口未完成导致的开发阻塞问题。

2. mock.js 有哪些核心功能？你能举几个例子吗？

生成随机数据：Mock.js 提供多种数据类型生成规则，能生成如姓名、邮箱、地址等随机数据。
拦截 Ajax 请求：可拦截指定的 Ajax 请求，返回模拟数据，无需依赖真实后端接口。
数据模板定义：支持使用数据模板定义数据结构，方便生成符合特定格式的数据。

js 复制代码

Mock.mock('/api/users', {
  "list|1-10": [{ // 生成 1~10 条数据
    "id|+1": 1,
    name: '@cname', // 随机中文名
    age|18-30: 0,  // 随机年龄
    email: '@email'
  }]
});

🧪 二、实际应用类问题（考察你在项目中如何使用）

3. 你在项目中是怎么使用 mock.js 的？能否给出一个完整流程？

在开发阶段使用 mock.js 模拟后端接口；
通常在 src/mock/index.js 中统一管理 mock 数据；
使用 axios 或 fetch 发送请求，mock.js 会自动拦截；
mock 数据与真实接口结构保持一致，方便后期切换；
mock.js 一般只在开发环境启用，构建时自动关闭。

演示流程

安装：npm install mockjs --save-dev
创建 mock/index.js 并配置接口；
在 main.js 或入口文件中引入；
开发时调用 /api/xxx 接口，mock.js 自动拦截；
上线前关闭 mock 或使用环境变量控制。

4. mock.js 如何模拟延迟请求？为什么需要这个功能？

可以通过 setTimeout 或 Mock.setup() 设置延迟；
模拟真实网络延迟，测试页面加载状态、骨架屏、loading 效果等；
示例：

js 复制代码

Mock.setup({
timeout: '200-2000' // 延迟 200ms 到 2000ms 之间
});

🧩 三、原理认知类问题（考察你是否了解背后机制）

5. mock.js 是如何拦截 Ajax 请求的？原理是什么？

mock.js 通过重写原生 XMLHttpRequest 对象，拦截所有 Ajax 请求；
当请求的 URL 匹配到 mock.js 配置的接口时，它不会真正发送请求，而是返回模拟数据；
这种方式对开发者是无感的，前端代码无需修改即可切换真实接口。

以下是在React 项目中使用mock

js 复制代码

import Mock from 'mockjs';

// 拦截 GET 请求 /api/data
Mock.mock('/api/data', 'get', {
  'code': 200,
  'message': 'success',
  'data|5-10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'email': '@email'
    }
  ]
});

js 复制代码

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './mock'; // 引入 Mock.js 配置

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/data')
      .then(response => {
        setData(response.data.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      <h1>Mock Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>
            {item.name} - {item.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

总结：

Mock.js 能有效提高前端开发效率，让前端在后端接口未完成时也能进行开发测试。通过定义数据模板和拦截 Ajax 请求，可模拟各种真实数据场景。