Mock, 讓你的開發脫離接口

時間 2019-11-16

標籤 mock 讓你開發脫離接口简体版

原文原文鏈接

在先後臺共同進行一個項目的時候常會遇到一種情景, 後臺定義好接口,前端按照接口進行開發, 當前端開發完成後臺接口卻尚未開發完成, 這個時候要進行接口測試, 只能等後臺開發完成才能測試, 在這中間浪費了不少時間, 如今有個利器能夠解決這個問題, 即便不用後臺,只要提早制定好接口的報文,那麼前端就能夠本身模擬接口來進行接口測試了, 今天要講的東西就是mockjax和mockJSONjavascript

mockjax和mockJSON是兩套不一樣的Javascript Library, 它們都是基於JQuery來開發的,
mockjax主要是能夠針對指定的網址進行mock, 當Ajax呼叫網址時攔截並回傳假的數據,
mockJSON則有點像是Json資料的Data Generater, 根據咱們指定的格式隨機數生成回傳的Json資料.

首先咱們來看個範例,
假設咱們目前須要開發一個網站, 它會使用Ajax呼叫/WebApi/GetUserData.svc, 取得User資料,
並將所取得的數據顯示在畫面上, 咱們能夠很快速地完成這部分的程序代碼.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Mocking JQuery Ajax</title>
 5     <script src="Scripts/jquery.1.7.2.js" type="text/javascript"></script>
 6     <script src="Scripts/jquery.mockjax.js" type="text/javascript"></script>
 7     <script src="Scripts/jquery.mockjson.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         $(function () {
10             $.ajax({
11                     url: '/WebApi/GetUserData.svc',
12             type: 'GET',
13             error: function (xhr) {
14                 alert('無法取得資料!');
15             },
16             success: function (response) {
17                 $("div#result").append(response);
18             }
19         });
20         });
21     </script>
22 </head>
23 
24 <body>
25     <h1>User Data</h1>
26     <div id="result">
27 
28     </div>
29 </body>
30 </html>

執行網頁, 咱們能夠發現這段程序是沒法成功執行的,前端

由於/WebApi/GetUserData.svc並不存在, 因此會跳出錯誤訊息.java

這時候mockjax就派上用場了, 咱們在呼叫ajax以前加上這段程序代碼jquery

1 var isAjaxMocked = true;
2 if (isAjaxMocked) {
3     $.mockjax({
4             url: '/WebApi/GetUserData.svc',
5     status: 200,
6     responseTime: 750,        
7     responseText: 'User Information'
8     });
9 }

這表明咱們mock了JQuery的Ajax,
當使用Ajax呼叫/WebApi/GetUserData.svc這個網址時,
將會花費750ms的時間, 回傳status code 200, 以及'User Information'這個字符串
從新執行一次網頁, 能夠看到執行成功了ajax

固然, 實際上在呼叫WebService時並不會只回傳一個字符串,
那能不能支持Json格式的數據呢? 答案是能夠的, 咱們能夠改寫咱們的程序代碼json

 1 $(function () {
 2     var isAjaxMocked = true;
 3     if (isAjaxMocked) {
 4         $.mockjax({
 5             url: '/WebApi/GetUserData.svc',
 6             status: 200,
 7             responseTime: 750,
 8             responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] }
 9         });
10     }
11     $.ajax({
12         url: '/WebApi/GetUserData.svc',
13         type: 'GET',
14         error: function (xhr) {
15             alert('無法取得資料!');
16         },
17         success: function (response) {
18             var data = response.user;
19             for (var i = 0; i < data.length; i++) {
20                 $("div#result").append(
21                     "<ul>" +
22                 "<li>ID: " + data[i].id + "</li>" +
23                 "<li>Name: " + data[i].name + "</li>" +
24                 "<li>Birthday: " + data[i].birthday + "</li>" +
25                 "</ul>" +
26                 "<hr />"
27                 );
28             }
29         }
30     });
31 });

執行以後, 能夠看到成功接收Json數據, 而且顯示在畫面上app

一切看起來很完美, 但如今問題來了, 若是咱們須要的是大量的數據,
咱們光是拚好Json數據就會花費掉許多的時間, 該怎麼辦呢?
這時候咱們就須要mockJSON, 它能夠根據咱們所制定的規則, 來產生JSON數據,
咱們修改mockjax的responseText部分使用mockJSON來產生數據單元測試

var isAjaxMocked = true;
if (isAjaxMocked) {
    $.mockjax({
        url: '/WebApi/GetUserData.svc',
        status: 200,
        responseTime: 750,
        responseText: $.mockJSON.generateFromTemplate({
            "user|3-6": [{
                "id|+1": 1,
                "name": "@MALE_FIRST_NAME",
                "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"
            }]
        })
    });
}

在這邊我使用了$.mockJSON.generateFromTemplate方法, 並設定了user數據產生的規則以下,
產生 3-6個user, 每一個user之中有如下字段,
id從1開始依序增長, 每次+1,
name產生男生的名字,
birthday產生隨機的日期.
從新執行網頁, 咱們能夠發現每次重整網頁結果都不一樣, 這能夠用來模擬查詢出不一樣的數據測試

是否是很輕鬆就能夠產生大量的Json數據呢?
而一旦WebService開發完成, 咱們只要將isAjaxMocked改爲false, 就能夠立刻實際呼叫WebService囉!

在這兩套Library幫忙之下, 就算Web Service徹底還沒開發好, 也並不會影響到咱們前端頁面的開發,
而這兩套Library在使用上也十分的簡單, 更進階的使用能夠參考我所作的心智圖或是官方網站.
mockjax 設定:

mockJSON設定:

結語透過這兩套Library, 不單單是能夠方便進行Ajax的本機端模擬測試,還能夠用在Javascript部分的單元測試, 讓單元測試不會由於Ajax而難以進行,這讓咱們在前端開發的進行上更加的方便!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。