Mock 语法讲解 - 技术杂谈

## Mock 语法讲解

Mock 是一个用于生成随机数据和拦截 Ajax 请求的 JavaScript 库。本文将介绍 Mock 的常用语法。

### 模拟数据

生成随机数据

Mock.Random.boolean()

生成一个随机的布尔值。

Mock.Random.integer(1, 100)

生成一个随机的整数，范围在 1 到 100 之间。

Mock.Random.float(1, 100, 2)

生成一个随机的浮点数，范围在 1 到 100 之间，保留两位小数。

Mock.Random.string(10)

生成一个随机的字符串，长度为 10。

Mock.Random.datetime()

生成一个随机的日期时间字符串。

生成随机数组

Mock.mock([
  {
    'name': '@cname',
    'age': '@integer(1, 100)',
    'birthday': '@datetime'
  }
])

生成一个随机数组，其中每个元素都是一个对象，对象包含三个属性：name、age 和 birthday。

### 拦截 Ajax 请求

拦截 Ajax 请求

Mock.ajax({
  url: '/api/user/list',
  type: 'get',
  data: {
    page: 1,
    size: 10
  },
  response: {
    code: 200,
    data: {
      total: 100,
      list: [
        {
          'name': '张三',
          'age': 20
        },
        {
          'name': '李四',
          'age': 25
        }
      ]
    }
  }
})

拦截对 /api/user/list 的 Ajax 请求，并返回一个模拟的响应。响应包含一个 code 属性，表示请求的状态码；一个 data 属性，表示请求的数据；一个 total 属性，表示数据总数；一个 list 属性，表示数据列表。

### 自定义规则

自定义规则

Mock.Random.extend({
  cname: function() {
    var surnames = [
      '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈'
    ];
    var names = [
      '伟', '芳', '刚', '娜', '丽', '辉', '晓', '明', '强', '红'
    ];
    return surnames[Mock.Random.integer(0, surnames.length - 1)] + names[Mock.Random.integer(0, names.length - 1)];
  }
})

自定义了一个名为 cname 的规则，用于生成随机的中文姓名。

### 使用 Mock

使用 Mock

$.ajax({
  url: '/api/user/list',
  type: 'get',
  data: {
    page: 1,
    size: 10
  },
  success: function(res) {
    console.log(res);
  }
})

使用 Mock 拦截 Ajax 请求，并输出请求的响应。

### 总结

Mock 是一个功能强大的 JavaScript 库，可以用于生成随机数据和拦截 Ajax 请求。本文介绍了 Mock 的常用语法，包括模拟数据、拦截 Ajax 请求和自定义规则。通过使用 Mock，我们可以轻松地模拟各种数据和场景，从而提高开发和测试的效率。