Ajax模擬插件 - Mockjax介紹

在前后台共同進行一個項目的時候常會遇到一種情景，大家統一定義好接口數據格式后，前后端各自按照接口進行開發，當前端開發完成后台接口卻還沒有開發完成，這個時候要進行接口測試，只能等后台開發完成才能測試，在這中間會浪費了很多時間。

現在有個利器可以解決這個問題，即使不用后台，只要提前制定好接口的數據格式，那么前端就可以自己模擬接口來進行接口測試了，那就是Mockjax和mockJSON插件。

Mockjax（https://github.com/jakerella/jquery-mockjax）主要是可以針對指定的url進行mock，當Ajax請求網址時攔截並回傳假的數據，

mockJSON（https://github.com/mennovanslooten/mockJSON）則有點像是Json數據的Data Generater，根據我們指定的格式隨機數生成回傳的Json數據。

首先我們來看個例子，假設我們目前需要開發一個網站，它會使用Ajax請求/WebApi/GetUserData，取得User數據，並將所取得的數據顯示在頁面上，如下面代碼：

<h1>User Data</h1>
    <div id="result">
</div>

<script type="text/javascript">
$.ajax({
    url: '/WebApi/GetUserData',
    type: 'GET',
    dataType: 'json',
    error: function(xhr) {
        alert('無法獲取資料!');
    },
    success: function(response) {
    　　$("#result").append(response);
    }
});
</script>

執行代碼，我們可以發現這段程序是無法成功執行的，因為/WebApi/GetUserData並不存在，所以會跳出錯誤信息：

這時候Mockjax就派上用場了，我們在請求ajax之前加上這段代碼：

$.mockjax({
    url: '/WebApi/GetUserData',
    // 返回的HTTP狀態碼
    status: 200,
    // 響應時間
    responseTime: 750,
    // 響應的HTTP內容類型
    contentType: 'application/json',
    // 返回的內容
    responseText:'User Information'
});

這代表我們mock了JQuery的Ajax，當使用Ajax請求/WebApi/GetUserData這個地址時，將會花費750ms的時間，回傳status code 200，以及'User Information'這個字符串。重新執行一次網頁，可以看到執行成功了

當然，實際上在Ajax請求時並不會只回傳一個字符串，我們可能需要Json格式的數據。下面我們改寫下程序代碼來請求Json數據

$(function() {
    $.mockjax({
            url: '/WebApi/GetUserData',
            // 返回的HTTP狀態碼
            status: 200,
            // 響應時間
            responseTime: 750,
            // 響應的HTTP內容類型
            contentType: 'application/json',
            // 返回的內容
            responseText: {
                "user": [{
                    "id": 1,
                    "name": "david",
                    "birthday": "2001/01/26"
                }]
            }

        });
        $.ajax({
            url: '/WebApi/GetUserData',
            type: 'GET',
            dataType: 'json',
            error: function(xhr) {
                alert('無法獲取資料!');
            },
            success: function(response) {
                var data = response.user;
                for (var i = 0; i < data.length; i++) {
                    $("#result").append(
                        "<ul>" +
                        "<li>ID: " + data[i].id + "</li>" +
                        "<li>Name: " + data[i].name + "</li>" +
                        "<li>Birthday: " + data[i].birthday + "</li>" +
                        "</ul>" +
                        "<hr />"
                    );
                }
            }
        });

    });

 

執行之后，可以看到成功接收Json數據，並且顯示在頁面上：

如果我們需要的是大量的數據,我們光是拼好Json數據就會花費掉許多的時間, 該怎么辦呢? 這時候我們就需要mockJSON, 它可以根據我們所制定的規則, 來產生JSON數據,我們修改Mockjax的responseText部分使用mockJSON來產生數據：

$.mockJSON.data.USER_NAME = ['張三', '李四', '王五', '趙六', '孫七', '周八', '吳九', '鄭十'];
$.mockjax({
    url: '/WebApi/GetUserData',
    // 返回的HTTP狀態碼
    status: 200,
    // 響應時間
     responseTime: 750,
    // 響應的HTTP內容類型
    contentType: 'application/json',
    // 返回的內容
    responseText: $.mockJSON.generateFromTemplate({
        "user|3-6": [{
        "id|+1": 1,
        "name": "@USER_NAME",
             "birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD"
        }]
    })
});

首先我們先在mockJSON中添加了自定義的USER_NAME變量。

在設置responseText時我使用了$.mockJSON.generateFromTemplate方法, 並設定了user數據產生的規則如下,

• 產生 3-6個user, 每個user之中有以下字段,
• id從1開始依序增加, 每次+1,
• name產生我們上面定義的USER_NAME中的名字,
• birthday使用mockJSON內置的DATE_YYYY、DATE_MM和DATE_DD產生隨機的日期.

重新執行網頁, 我們可以發現每次重整網頁結果都不同, 這可以用來模擬查詢出不同的數據

當然，Mockjax還有許多其他的功能，（例如使用proxy或者callback函數來返回響應數據，修改HTTP響應頭等）大家可以到https://github.com/jakerella/jquery-mockjax上面查看。