題圖 By HymChu From lnstagram
前端工程師在做前後端分離的項目的時，有時候接口未開發完成，或者開發環境不允許使用接口，這時候就需要前端工程師自己模拟資料了，模拟資料的方式有很多種，今天給大家介紹一款npm包，Mock.js。
首先我們要明白Mock.js的本質是攔截ajax請求，并傳回約定好的資料。資料需要根據開發者的需求結合Mock.js的文檔來定制，下面來看一下如何使用：
引入mock.js和JQuery
<script src="js/jquery-1.12.4.min.js">script> <script src="http://mockjs.com/dist/mock.js">script>
建立模拟Api，這裡需要結合需求按照文檔編寫，攔截Ajax請求，傳回測試資料，這裡面需要注意的是mock的第一個參數，指的是我們将來發送ajax要請求的接口位址：
//模拟背景 Mock.mock('http://api.com', { "user|5-10": [{ 'name': '@cname', //中文名稱 'age|1-100': 100, //100以内随機整數 'birthday': '@date("yyyy-MM-dd")', //日期 'city': '@city(true)' //中國城市 }] });
發送ajax請求：
//JQuery方式 $.ajax({ url: 'http://api.com', dataType: 'json' }).done(function(data, status, xhr) { console.log( JSON.stringify(data, null, 4) ) });
這裡也可以用原生的ajax請求，隻要是用XMLhttprequest的執行個體發送的請求，都會被Mock.js攔截，諸如axios、vue-resurce等等。
看一下響應結果：
{ "user": [ { "name": "锺麗", "age": 17, "birthday": "1983-11-01", "city": "内蒙古自治區 赤峰市" }, { "name": "陳豔", "age": 25, "birthday": "1973-07-10", "city": "河南省 駐馬店市" }, { "name": "馮霞", "age": 59, "birthday": "2010-10-28", "city": "澳門特别行政區 離島" }, { "name": "賈秀英", "age": 63, "birthday": "1973-01-22", "city": "新疆維吾爾自治區 伊犁哈薩克自治州" }, { "name": "周勇", "age": 34, "birthday": "1985-05-21", "city": "湖南省 衡陽市" } ]}
以上便是mock的使用。
資料引用：
https://www.jianshu.com/p/8453b045544f
http://mockjs.com/
歡迎大家關注、轉發、點選好看