vue全家桶进阶之路24：Mock

Mock 是一个 JavaScript 库，用于生成随机数据或模拟 HTTP 请求响应，用于前端开发中的单元测试、功能测试、集成测试等场景。

Mock 可以生成各种类型的数据，包括字符串、数字、布尔值、对象、数组等等，并支持多种数据格式，例如 JSON、XML、YAML 等。Mock 还支持自定义数据格式和数据生成规则，可以方便地适应不同的业务需求。

Mock 可以模拟 HTTP 请求和响应，支持 GET、POST、PUT、DELETE 等请求方法，并且可以自定义请求头、响应头、响应状态码等属性，模拟各种不同的场景。Mock 还支持延时响应和随机响应，可以模拟不同的网络情况和服务端响应时间。

Mock 可以在前端项目中直接引入并使用，也可以使用其它构建工具和框架，例如 webpack、Vue.js 等。

Mock 的官方文档可以在以下网址找到：https://github.com/nuysoft/Mock/blob/refactoring/README.md

 

 

Mock 的安装和使用步骤如下：

1. 在项目中安装 Mock

可以使用 npm 或 yarn 在项目中安装 Mock。在命令行中执行以下命令即可：

npm install mockjs
或者

yarn add mockjs

 

2. 编写 Mock 数据

在项目中创建一个 mock 目录，并在该目录下创建一个 index.js 文件。在 index.js 中，使用 Mock 提供的 API 编写需要的数据，例如：

const Mock = require('mockjs')

Mock.mock('/api/user', 'get', {
  code: 200,
  message: 'success',
  data: {
    id: '@guid',
    name: '@cname',
    age: '@integer(18, 60)',
    email: '@email',
    phone: /^1[3456789]\d{9}$/,
    'sex|1': ['男', '女']
  }
})

上述代码定义了一个 /api/user 的 GET 请求，返回的数据包含 code、message 和 data 三个字段，其中 data 包含了一个随机生成的用户信息。

3. 拦截 Ajax 请求

在项目中需要拦截 Ajax 请求并返回 Mock 数据，可以使用第三方库 interceptors，例如 axios、jQuery 等。

以 axios 为例，在项目中使用 axios 发送 Ajax 请求时，可以在请求前使用 interceptors 拦截请求，并返回 Mock 数据，例如：

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import mockData from './mock'

const mock = new MockAdapter(axios)

mockData.forEach((item) => {
  mock.onAny(item.url, item.method).reply(200, item.response)
})

在上述代码中，我们首先引入了 axios 和 axios-mock-adapter 两个库，然后创建了一个 mock 对象，并循环遍历了我们定义的 Mock 数据，使用 mock.onAny() 方法拦截 Ajax 请求，并返回对应的 Mock 数据。

4. 测试 Mock 数据

在项目中使用 Mock 数据时，需要测试 Mock 数据的正确性和可用性。可以使用 postman、Swagger 等工具测试 Mock 数据，也可以使用测试框架编写单元测试、功能测试等。

以上就是使用 Mock 的基本步骤，具体使用方法可以参考官方文档：https://github.com/nuysoft/Mock/blob/refactoring/README.md