Mock.js 基礎(chǔ)用法介紹

Mock.js是一個(gè)常用于生成隨機(jī)數(shù)據(jù)和攔截Ajax請求的JavaScript庫。本文將介紹Mock.js的用法，包括安裝和基礎(chǔ)用法，在開始前我們可以看下看：了解 Mock.js 的語法規(guī)范。

安裝

可以通過npm安裝Mock.js：

npm install mockjs

基礎(chǔ)用法

隨機(jī)生成一個(gè)用戶信息

使用Mock.js可以很方便地生成隨機(jī)數(shù)據(jù)。下面的示例中，每個(gè)用戶信息包括隨機(jī)生成的中文名、15-25之間的年齡和隨機(jī)的城市。代碼如下所示：

const Mock = require('mockjs') 
const data = Mock.mock({ 
    'name': '@cname', 'age|15-25': 0, 'city': '@city' 
}) 
console.log(data)

運(yùn)行上面的代碼，可能會得到如下的輸出結(jié)果：

{ name: '張偉', age: 18, city: '羊城' }

隨機(jī)生成一個(gè)用戶信息數(shù)組

如果需要生成多個(gè)用戶信息，可以定義一個(gè)Mock.js的數(shù)據(jù)數(shù)組模板，可以指定數(shù)組長度為1到10的隨機(jī)數(shù)。代碼如下所示：

const data = Mock.mock({ 'list|1-10': [{ 'name': '@cname', 'age|15-25': 0, 'city': '@city' }] }) 
console.log(data)

運(yùn)行上面的代碼，可能會得到如下的輸出結(jié)果：

{ "list": [ { "name": "陳芳", "age": 24, "city": "西寧" }, { "name": "羅娟", "age": 20, "city": "咸陽" } ] }

Mock.js API

下面介紹Mock.js中常用的 API。

生成隨機(jī)數(shù)據(jù)

Mock.Random對象包含了Mock.js中的所有隨機(jī)數(shù)據(jù)生成方法。下面是一些常用的方法：

• Mock.Random.boolean()：生成一個(gè)隨機(jī)的布爾值。
• Mock.Random.integer(min, max)：生成一個(gè)隨機(jī)的整數(shù)，可以指定范圍。
• Mock.Random.float(min, max, dmin, dmax)：生成一個(gè)隨機(jī)的浮點(diǎn)數(shù)，可以指定范圍和精度。
• Mock.Random.string(length)：生成一個(gè)隨機(jī)的字符串，可以指定長度。
• Mock.Random.name(middle?)：生成一個(gè)隨機(jī)的常見英文姓名。
• Mock.Random.cname()：生成一個(gè)隨機(jī)的常見中文姓名。
• Mock.Random.date()：生成一個(gè)隨機(jī)的日期。
• Mock.Random.time()：生成一個(gè)隨機(jī)的時(shí)間。
• Mock.Random.datetime()：生成一個(gè)隨機(jī)的日期時(shí)間。
• Mock.Random.image(size, background, foreground, format, text)：生成一個(gè)隨機(jī)的圖片，可以指定大小、背景色、前景色、格式和文字。

生成數(shù)據(jù)模板指定的數(shù)據(jù)

Mock.mock(template) 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。數(shù)據(jù)模版可以生成復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。下面是一個(gè)示例：

const data = Mock.mock({ 'name': '@cname', 'age|15-25': 0, 'email': /[a-z]{5}@163.com/, 'phone': /1[35789]\d{9}/ }) 
console.log(data)

運(yùn)行上面的代碼，可能會得到如下的輸出結(jié)果：

{ name: '杜浩', age: 15, email: 'xianq@163.com', phone: '13940684653' }

模擬接口請求

Mock.mock(url, template)和Mock.mock(method, url, template)用于根據(jù)接口地址和數(shù)據(jù)模板模擬接口請求，支持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' })

設(shè)置Ajax請求響應(yīng)時(shí)間

Mock.setup({timeout: 400}) 指定被攔截的Ajax請求的響應(yīng)時(shí)間，表示400毫秒后才會返回響應(yīng)內(nèi)容。示例如下：

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}/ })

上面的代碼表示，響應(yīng)時(shí)間介于200到600毫秒之間。

總結(jié)

本文介紹了Mock.js的基礎(chǔ)用法，包括隨機(jī)生成用戶信息、隨機(jī)生成用戶信息數(shù)組、Mock.js API的常用方法、生成數(shù)據(jù)模板和模擬接口請求。Mock.js是一個(gè)非常實(shí)用的數(shù)據(jù)模擬和接口測試工具，能夠大大提高前端開發(fā)效率。想進(jìn)階成為一位 Mock 高手？Apifox 是一個(gè)強(qiáng)大的接口文檔管理工具，用 Apifox 可以讓 Mock 變得更容易。Apifox 語法完全兼容 Mock.js，  并擴(kuò)展了一些 Mock.js 沒有的語法（如國內(nèi)手機(jī)號 @phone），更多關(guān)于mock.js接口測試自動(dòng)化的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論