Mock.js 基礎用法介紹
Mock.js是一個常用於生成隨機數據和攔截Ajax請求的JavaScript庫。本文將介紹Mock.js的用法，包括安裝和基礎用法，在開始前我們可以看下看：瞭解 Mock.js 的語法規範。
安裝
可以通過npm安裝Mock.js：
npm install mockjs
基礎用法
隨機生成一個用户信息
使用Mock.js可以很方便地生成隨機數據。下面的示例中，每個用户信息包括隨機生成的中文名、15-25之間的年齡和隨機的城市。代碼如下所示：
const Mock = require('mockjs') const data = Mock.mock({ 'name': '@cname', 'age|15-25': 0, 'city': '@city' }) console.log(data)
運行上面的代碼，可能會得到如下的輸出結果：
{ name: '張偉', age: 18, city: '羊城' }
隨機生成一個用户信息數組
如果需要生成多個用户信息，可以定義一個Mock.js的數據數組模板，可以指定數組長度為1到10的隨機數。代碼如下所示：
const data = Mock.mock({ 'list|1-10': [{ 'name': '@cname', 'age|15-25': 0, 'city': '@city' }] }) console.log(data)
運行上面的代碼，可能會得到如下的輸出結果：
{ "list": [ { "name": "陳芳", "age": 24, "city": "西寧" }, { "name": "羅娟", "age": 20, "city": "咸陽" } ] }
Mock.js API
下面介紹Mock.js中常用的 API。
生成隨機數據
Mock.Random對象包含了Mock.js中的所有隨機數據生成方法。下面是一些常用的方法：
Mock.Random.boolean()：生成一個隨機的布爾值。Mock.Random.integer(min, max)：生成一個隨機的整數，可以指定範圍。Mock.Random.float(min, max, dmin, dmax)：生成一個隨機的浮點數，可以指定範圍和精度。Mock.Random.string(length)：生成一個隨機的字符串，可以指定長度。Mock.Random.name(middle?)：生成一個隨機的常見英文姓名。Mock.Random.cname()：生成一個隨機的常見中文姓名。Mock.Random.date()：生成一個隨機的日期。Mock.Random.time()：生成一個隨機的時間。Mock.Random.datetime()：生成一個隨機的日期時間。Mock.Random.image(size, background, foreground, format, text)：生成一個隨機的圖片，可以指定大小、背景色、前景色、格式和文字。
生成數據模板指定的數據
Mock.mock(template) 根據數據模板生成模擬數據。數據模版可以生成複雜的數據結構。下面是一個示例：
const data = Mock.mock({ 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) console.log(data)
運行上面的代碼，可能會得到如下的輸出結果：
{ name: '杜浩', age: 15, email: 'xianq@163.com', phone: '13940684653' }
模擬接口請求
Mock.mock(url, template)和Mock.mock(method, url, template)用於根據接口地址和數據模板模擬接口請求，支持GET、POST、PUT、DELETE等請求方法。示例如下：
Mock.mock('/user', 'get', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) Mock.mock('/user', 'post', { 'result': 'success' })
設置Ajax請求響應時間
Mock.setup({timeout: 400}) 指定被攔截的Ajax請求的響應時間，表示400毫秒後才會返回響應內容。示例如下：
Mock.setup({timeout: '200-600'}) Mock.mock('/user', { 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ })
上面的代碼表示，響應時間介於200到600毫秒之間。
總結
本文介紹了Mock.js的基礎用法，包括隨機生成用户信息、隨機生成用户信息數組、Mock.js API的常用方法、生成數據模板和模擬接口請求。Mock.js是一個非常實用的數據模擬和接口測試工具，能夠大大提高前端開發效率。想進階成為一位 Mock 高手？Apifox 是一個強大的接口文檔管理工具，用 Apifox 可以讓 Mock 變得更容易。Apifox 語法完全兼容 Mock.js， 並擴展了一些 Mock.js 沒有的語法（如國內手機號 @phone）。小夥伴快去試試看吧~
