前端測試Mock API工具——EoLinker API管理平台

之前開發一直在使用Production和QA環境，但是這兩種環境下rest api 返回來的數據並不能保證各種極端的數據存在。

比如正常情況下服務器返回這樣的json

{
    "status": {
        "code": 0,
        "message": "It works!"
    },
    "server": {
        "time": 1591070092,
    },
    "data": {
        "color": "#1a1b1c"
    }
}

在個別情況下，可能會存在data區域是null的時刻。

或者color字段也有可能返回的是“red”這樣的字符串，或者需要模擬一下這個api接口要10s后才能返回數據的情況。

還有一個重要的使用場景就是當前后端並行開發的時候，后端的代碼還沒有准備好，但是json數據格式已經約束好。

前端為了節約時間，可以直接使用Mock工具來自行生成一些數據，進行開發。

 

最近我們就是遇到了最后一種情況，前后端同時上線，api后端還在開發，前端需要給用戶展示處理。所以就迫切需要一個Mock工具。

當然這個Mock工具在內部和使用很久了，內部的api都已經上了Mock環境。由於我這面的平台還沒有接入，所以做這個的時候順便學習一下Mock。

 

下圖是在某個特定的界面上的某一個特定位置，通過一系列隱藏按鍵上上下下左右左右BA來觸發切換環境。

 

 

 

模擬api的平台有很多，EoLinker、Easy Mock、Mock API、YAPI。。。。。。

我們就拿EOLinker做一下實驗，別的平台都差不多，大同小異。

通過EoLinker官網就可以免費注冊使用。注冊后儀表盤里面有一個可以現成測試的項目：APIManagementDemoProject。

 

 點擊左側的API，即可看到API列表。

 

 

我們那第一個【用戶注冊】的api作為示例，點擊進去。

可以看到這個api是一個 Post請求，我們需要發送user_name和user_password的參數給服務器。

然后服務器才能返回給我們注冊的user_id和status_code。

 

 

點擊Mock Api，

 

 

這里系統默認給了兩個期望，一個是用戶名為jackliu的時候，返回注冊成功；

一個是用戶名為percy，返回用戶名已經存在，注冊失敗。

我們也可以自己定義，加上自己的期望。

 

點擊編輯，進入期望1.

可以看到API的使用方法是post

 

 

里面已經設置好了需要傳遞的參數，還有返回值。

那么我們就可以使用PostMan來模擬測試這個api。

 

 

 可以看到PostMan請求回來的數據，和我們在Mock里面設置的期望一模一樣。

 

同樣的，注冊失敗的例子，我們用PostMan發送percy名字的時候，就返回失敗。

 

 

 

通過類似上述的操作，就可以實現模擬api的各種返回了。

 

同樣的，在代碼里面也可以實現同樣的操作。

這里使用C#代碼演示：

            HttpClient client = new HttpClient();
            string url = "https://mockapi.eolinker.com/1Hnyqy42b252eaf4056fa88b84d564f4ecb0322847984fa/demo/user/register";
            var formdata = new MultipartFormDataContent
            {
                {new StringContent("percy"), "user_name" },
                {new StringContent("123456"), "user_password" }
            };
            var res = await client.PostAsync(url, formdata);
            string content = await res.Content.ReadAsStringAsync();
            var user = await Json.ToObjectAsync<User>(content);

 

 

然后就可以看到返回的結果是

 

 

Mock還有更多的玩法，大家可以自行去探索