搭本地 Mock.js 模拟后端接口，秒速提升开发效率

Mock 之搭建本地 Mock.js

一、目的：模拟后端接口

在前端开发中，后端接口是必不可少的。然而，在开发早期，后端接口往往尚未完成，或者需要频繁地修改。这使得前端开发人员不得不等待后端接口的开发或修改，从而延缓了开发进度。为了解决这个问题，我们可以使用 Mock.js 来模拟后端接口。Mock.js 是一款 JavaScript 库，可以轻松地模拟各种后端接口，使您能够在不依赖实际后端的情况下进行前端开发和测试。

二、发请求

1. 安装

首先，我们需要在项目中安装 Mock.js。您可以使用以下命令安装 Mock.js：

npm install mockjs --save-dev

2. 配置 axios 官网

接下来，我们需要配置 axios，以便能够使用 Mock.js 来模拟后端接口。在您的项目中，找到 axios 的配置文件，通常是 axios.config.js。在该配置文件中，添加以下代码：

import Mock from 'mockjs';

// 启用 Mock.js
Mock.setup({
  timeout: '1000-2000' // 请求延迟时间
});

// 拦截所有请求
axios.interceptors.request.use((config) => {
  // 只有本地开发环境才使用 Mock.js
  if (process.env.NODE_ENV === 'development') {
    // 使用 Mock.js 模拟请求
    Mock.mock(config.url, config.method, config.data);
  }

  return config;
});

3. 对接口发起请求

现在，您就可以使用 axios 来发起对 Mock.js 模拟的后端接口的请求了。以下是一个示例：

// 导入 axios
import axios from 'axios';

// 发起请求
axios.get('/api/users').then((res) => {
  console.log(res.data);
});

三、Mock 模拟响应

1. 安装

首先，我们需要安装 Mock.js。您可以使用以下命令安装 Mock.js：

npm install mockjs --save-dev

2. 配置 Mock.js

接下来，我们需要配置 Mock.js，以便能够模拟后端接口的响应。在您的项目中，创建一个名为 mock.js 的文件。在该文件中，添加以下代码：

// 导入 Mock.js
import Mock from 'mockjs';

// 模拟用户数据
Mock.mock('/api/users', 'get', {
  'users|10-20': [{
    'id': '@id',
    'name': '@cname',
    'age|18-60': 18
  }]
});

在这段代码中，我们使用 Mock.js 模拟了 /api/users 接口的响应。该接口将返回 10 到 20 条用户数据，每条用户数据包含 id、name 和 age 三个字段。

3. 使用 Mock.js 模拟响应

现在，您就可以使用 Mock.js 来模拟后端接口的响应了。以下是一个示例：

// 导入 axios 和 Mock.js
import axios from 'axios';
import Mock from 'mockjs';

// 使用 Mock.js 模拟请求
Mock.mock('/api/users', 'get', {
  'users|10-20': [{
    'id': '@id',
    'name': '@cname',
    'age|18-60': 18
  }]
});

// 发起请求
axios.get('/api/users').then((res) => {
  console.log(res.data);
});

在