寫在前面

交戰之前，戰士必先利其兵器，作為開發人員的我們更是如此，在日常的開發中如果擁有一款得心應手的工具軟件，一定能夠大大提高我們的工作效率。

在開發過程中，由于后端與前端并行開發，但是作為前端開發工程師的我們，難道在搭建完頁面后只能等待后端的接口么？這樣的話我們則完全被后端開發限制住了。在前面跟大家介紹過 Mock.js 不知道大家有么有看到哈，如果沒有看到的同學，或者不知道mock是什么的小伙伴可以先去看看，其實mock的出現就是前后端分離后為前端不受制于后端同學的束縛而出現的，在實際開發中后端同學有自己的開發節奏，不能如我們前端所想幾分鐘出一個接口，可能我們索要接口的時候后端同學還在構思如何建表？使用開發好的 API 對接，也有可能一個 API 不通就阻塞了整個軟件的對接工作。同時對軟件的敏感度也很高，一不小心就可能導致整個軟件不能正常工作。并且界面之間存在著嚴重的相互依賴關系，產生的業務邏輯非常復雜，這些都會對軟件的開發效率產生很大的影響。

所以學習如何利用最好的 Mock數據是很關鍵的。這樣做會降低前端開發者的工作量，降低開發費用，提高開發效率。下面我們就來看一下常見的Mock方法，我們可以根據具體的場景和條件來進行選擇和配置。最關鍵的是要知道如何去做，并從中挑選出最適合自己的方式。

Mock介紹

或許還有一些沒見過 Mock的讀者，不知道 Mock是什么。今天就來跟你說說這玩意的厲害，這玩意非同凡響！
簡單地說， Mock是指在測試期間，為一些難以構建或不易獲得的對象，創建一個虛擬物體進行測試。而這個虛擬物體就是模擬物體，模擬對象是在調試過程中實際對象的替代。
有時候， Mock服務被稱為一個測試服務替代品，或一個測試服務，下面的圖片非常生動地說明了它的功能。

Mock能解決什么問題?

Mock功能的優勢:

前端對接不依賴后端： 讓前端工程師獨立于后端進行開發。
增加測試的真實性： 通過隨機數據，模擬各種場景。
開發無侵入：不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應數據。
數據類型豐富：支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
方便擴展： 支持擴展更多數據類型，支持自定義函數和正則。

Mock功能適用場景在實際工作中非常多，真正在實際項目中，引入Mock工具通常來解決如下幾類問題。主要有：

? 開發進行單元測試
因為單元測試只對目前的單元進行，所以必須保證所有的內外依賴關系都是穩定的，使用 mock的方式來模擬基礎單元依賴的其它單元，這樣就可以把測試的重心放在當前單元的功能上，從而消除外部因素的影響，提高測試的準確性。

? 調用第三方接口
在做接口自動化的時候，有時候需要調用第三方的接口，但是別人公司的接口服務穩定性不受你的控制，有可能別人提供的測試環境今天服務給你開著，別人就關掉了，給自動化接口測試帶來很多的麻煩，此時就可以通過mock來模擬接口的返回數據，比如模擬各種第三方異常時的返回。

? 解決接口間的相互依賴
例如，您正在開發前端網頁，現在您需要開發付款功能：下一次訂購、付款頁面界面、付款結果、付款成功、顯示付款成功頁、付款失敗頁。為了實現這個特性，您必須調用后臺界面，并顯示出相應的頁面。現在的后端界面還沒有完全開發出來，如果是前端開發，那就只能加班了。要實現開發工作的同步，在這個時候，您可以按照接口文件的要求，將接口的地址和參數發送給用戶，再通過 mock接口的不同的返回接口，來完成開發工作。

傳統Mock解決方案

傳統Mock解決方案常見的有兩種，一種是使用Postman接口測試工具進行Mock數據，另外一種是使用Mock js第三方庫進行Mock數據。

Postman接口測試工具

Postman中需要點擊Create Mock Server配置mock服務。選擇之后，應用程序會進行一步一步的提示。

配置需要mock的接口地址，手動輸入響應數據返回值即可。

Mock js第三方庫

Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立于后端進行開發，幫助編寫單元測試。提供了以下模擬功能：

根據數據模板生成模擬數據
模擬 Ajax 請求，生成并返回模擬數據
基于 HTML 模板生成模擬數據

在Mac上打開命令行終端，輸入安裝命令： npm install mockjs，稍等幾分鐘安裝完成。
簡單示例展示：
Mock list是自增數據

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({// 屬性 list 的值是一個數組，其中含有 1 到 10 個元素'list|1-10': [{// 屬性 id 是一個自增數，起始值為 1，每次增 1'id|+1': 1}]
})
// 輸出結果
console.log(JSON.stringify(data, null, 4))

Mock 按規則生成字符串

// 指定范圍的數量
Mock.mock({ "string|1-10": "★" }) // 執行后
{ "string": "★★" } // 隨機生成數量為1-10個'*'字符串
// 固定數量
Mock.mock({ "string|3": "*" })  // 執行后
{ "string": "***" } // 生成指定數量的'*'（示例是3個）字符串

Postman和Mock js使用小結

Postman： Postman的安裝更容易，但Postman在mock功能中的表現，必須手工填寫mock數據，而且只有一個配置可以寫入。在實際應用中，仍然不夠靈活，擴展性不強。

Mock js：Mock js雖然能mock出很多類型的數據，但是它需要嵌入在前端vue項目中結合使用，上手使用有一定的門檻。

總的來看，傳統Mock解決方案存在幾類問題:

適配復雜場景的Mock能力弱； ? 復雜依賴環境不穩定； ? 會增加代碼量，在寫mock對象代碼時，有可能引入錯誤；
學習成本較高，需要編寫代碼；

綜上問題，我們需要一套開箱即用的Mock工具，能應對復雜的業務場景、穩定并且可靠、對代碼無侵入、上手使用簡單。

Eolink解決方案

在介紹Eolink解決方案之前，介紹下Eolink到底是個啥? 能解決什么問題?讓我們先來了解一下。

官方的解釋 : Eolink 能夠提供 API 全生命周期管理解決方案，幫助前端、后端以及測試人員的工作變得更敏捷，包含功能:接口文檔管理、接口自動化測試、接口數據Mock等功能。

這意味著 Eolink將會為我們帶來一種全新的技術解決方案, 接下來給大家介紹強大的mock功能使用。

Eolink的 mock功能非常完善，從一個整體 Mock到一個字段級的 Mock都可以適應不同的情況。我肯定相信大部分人會將其用于每天的應用，例如前后端項目開發，第三方接口的調試，以及接口的自動化測試，幾個小時就能熟練地運用。我將其功能拆解成思維導圖的方式講解，這樣會更清晰易懂。

從以上的思維導圖可以分為六個層次的 Mock功能，下面我將通過每個 Mock的業務上的實例來說明功能的特點，具體的 Mock的用法，還有一些具體的調試和優化。

全局Mock

特點： 提供系統兜底的Mock規則，確保每個Mock調用的返回參數均有隨機數據。

全局Mock是Eolink提供的最兜底或者最保守的一種Mock功能，主要是為了方便那些不想要附加 Mock的同學，提供一些簡單的Mock功能。

首先，需要編輯頁面的返回結果設置city字段。

然后在文檔底部Mock模塊選擇系統默認期望鏈接并且點擊復制到瀏覽器中。

每次刷新瀏覽器，都會name字段都會返回隨機字符串，達到了每個Mock調用的返回參數均有隨機數據的效果。

高級Mock

特點：配置不同的請求參數，以獲得不同的返回數據。靈活全面的自定義配置，一個接口實現多種返回數據。

比如請求參數的類型name字段參數值是1、2、3，但是需要返回的結果返回不同的響應結果。在實際項目中，為了降低前端配置Mock接口，可以通過一個接口實現配置不同的請求參數，獲取不同的返回數據。

可是使用動態Javascript通過代碼生成返回數據時，JavaScript是一種支持面向對象編程、命令式編程和函數式編程的網頁開發客戶端腳本語言，可以使用編寫 Javascript 代碼的方式，并使用 return 語句返回數據，而且這種方式最容易處理數據，本文中使用的就是這種方式。Javascript模式中也支持 Mock JS，通過 Mock.mock() 方式調用，詳情可以查閱 Mock JS 官方文檔。

通過編寫Javascript腳本設置響應內容，還可以直接使用內置函數設置“請求體觸發條件”相關內容，
設置的信息等同于在“請求體觸發條件”輸入框中的設置，如設置Header參數或者請求體參數等，
設置完成后，在測試時填寫對應的參數進行觸發。

示例：設置請求體參數，對觸發條件進行判斷輸出符合條件的數值判斷觸發條件“a”是否等于“eo_test”若等于則輸出“成功”，否則輸出“失敗”。

在請求參數中輸入status=1后，可以看出結果是code=1，這樣就是根據輸入條件動態mock返回數據的效果。當然，在“數據輸出”中，我們可以添加代碼，對數據的合理性進行檢查，以確保數據的合理可信。

返回結果Mock

特點：編輯接口文檔的返回結果的同時完成Mock規則配置。邊寫文檔邊完成Mock配置，無需額外工作量。

在Mock規則區域，可直接在Mock規則輸入框中填寫固定值，Mock API調用時直接返回其固定值。

智能內置Mock

特點：智能識別常用返回參數，自動填入預置Mock規則。零配置，無形中完成Mock規則填寫。

系統已內置一套常用的智能Mock規則，你無需做任何配置，在文檔中編寫對應的字段名則會出現對應的Mock規則。實現Mock API零配置，無形中完成Mock規則填寫。

比如: 字段名輸入time，Mock規則會自動識別匹配出內置Mock規則，@datetime(‘yyyy-MM-dd HH:mm:ss’)這種Mock規則，用戶在使用過程中，使用效果無感知、不需要額外配置。

智能自定義Mock

特點：智能識別特殊返回參數，自動化填充自定義Mock規則。一次配置多次復用，提升Mock規則邊寫效率。

你可以通過智能自定義Mock配置，使得你在文檔中編寫某個字段名后，系統自動填入對應的Mock規則。實現字段Mock規則一次配置，永久復用。大大提高了工作效率，讓您在工作中游刃有余。

把Mock規則和字段名的匹配規則預先自定義好，然后后續可以在實際使用的時候，填寫對應的字段名可以輸出對應的Mock規則。
比如
@ctitle: 隨機生成一句中文標題。
@cword: 隨機中文詞組。
@datetime: 日期時間。

約束條件Mock

特點：根據字段約束條件自動生成對應的Mock數據。字段級多條件配置，還原最真實的隨機數據。

對返回參數字段進行約束條件設置后，Mock規則輸入框會自動填入占位符@eo.limit 并自動根據約束條件返回Mock數據。

在操作區域內點擊更多設置，如字段長度，最大值最小值，和值可能性等。

Eolink的Mock解決方案的優勢:

能適配各種場景的Mock能力強；
學習成本低，不需要額外編寫代碼；
mock能力更加智能，實現零配置；
mock服務和應用服務彼此分離，不會存在代碼污染；

寫在最后

Eolink在Mock方面表現的很強大，適用于不同的業務場景、適用于不同的使用人群，通過以上兩種簡單和高級的調用，不同之處是簡單的 Mock配置簡單，而高級 Mock是基于簡單 Mock的增強，可以適應更加復雜的情況，結合多種智能配置方式搭建的Mock API 能力體系，滿足了大部分用戶對Mock能力的需求。

看到這里是不是感覺到我們前端再也不用卑微的去懇求接口了，是不是我們在某種程度上拜托了后端的限制了呢，自己模擬數據進行后續前端的工作。趕快來嘗試我們這款強大的 Eolink 吧！體驗鏈接：https://www.eolink.com