前端mock数据搞定接口，不再苦等后端

使用 JavaScript 模拟接口数据和 AJAX 获取数据

搭建环境

为了模拟后端接口并用 AJAX 获取数据，需要创建一个 Mock Server 环境。

1. 初始化项目

在项目根目录下运行 npm init 命令，创建一个 package.json 文件。

2. 安装依赖

使用以下命令安装必要的依赖项：

npm i express
npm i mockjs

3. 创建服务器文件

创建一个 index.js 文件，用作服务器入口点。

4. 定义路由

在 index.js 文件中，设置一个 GET 路由来响应模拟数据请求。

const express = require('express');
const app = express();
const port = 3000;

const data = Mock.mock({
  'list|10': [{
    'id': '@id',
    'name': '@cname',
    'age': '@integer(1, 100)'
  }]
});

app.get('/api/list', (req, res) => {
  res.json(data);
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

使用 JavaScript 模拟接口数据

1. 导入 Mock.js

在需要模拟接口数据的 JavaScript 文件中，导入 Mock.js 库。

import Mock from 'mockjs';

2. 定义模拟数据

使用 Mock.js 生成模拟数据。

const data = Mock.mock({
  'list|10': [{
    'id': '@id',
    'name': '@cname',
    'age': '@integer(1, 100)'
  }]
});

3. 返回模拟数据

在需要响应模拟数据的路由处理程序中，返回模拟数据。

app.get('/api/list', (req, res) => {
  res.json(data);
});

使用 AJAX 获取数据

1. 导入 Axios

在需要使用 AJAX 获取数据的 JavaScript 文件中，导入 Axios 库。

import axios from 'axios';

2. 发送 AJAX 请求

使用 Axios 发送 GET 请求以获取模拟数据。

axios.get('/api/list').then((res) => {
  console.log(res.data);
});

3. 处理响应

在 AJAX 请求成功后，处理响应数据。

console.log(res.data);

常见问题解答

1. 如何设置特定的 HTTP 状态码？

在 res.json() 方法中指定 statusCode 属性，例如：

res.status(201).json(data);

2. 如何模拟带有延迟的请求？

使用 setTimeout() 函数延迟响应，例如：

setTimeout(() => {
  res.json(data);
}, 1000);

3. 如何模拟错误响应？

使用 res.status() 方法指定错误状态码，例如：

res.status(500).send('Internal Server Error');

4. 如何自定义模拟数据？

在 Mock.mock() 函数中传递一个对象来定义自定义数据模板。

5. 如何在开发过程中关闭 Mock Server？

在终端中按 Ctrl+C 即可关闭服务器。