博客 / 詳情

返回

【前端小技巧】如何使用 Eolink Apilkit 調用 Mock ?

在開發過程中,進度比較趕的情況下,前端人員當頁面寫完時,後台的接口還沒寫完,等要交付的時候後端才把接口給你,這個時候就很尷尬。

這個時候 Mock 就可以很好的解決這個問題,前端團隊可以在 API 還沒開發完成的情況下,藉助 Mock API 實現預對接,加速開發進程。測試團隊可以通過 Mock API 解決不必要的系統,完成集成測試。

Eolink Apikit 為前端工程師提供 API 文檔管理,快速接口測試,以及 Mock API 創建與調用,及查看文檔變更歷史的能力。有助於前端工程師快速查看 API 文檔詳情與歷史記錄,快速生成和使用 Mock API 提前進行頁面效果驗證。


如何 Mock?

項目地址:https://www.eolink.com/apikit

簡易Mock

簡易Mock功能可在編寫API文檔的時候,同時對不同的返回結果進行Mock配置。並且可預置智能Mock規則,在編寫返回參數時,若參數名和字段類型匹配智能Mock規則時,系統自動填入該參數的Mock規則。

配置簡易Mock後,API文檔會自動生成Mock URL,用户可複製該URL直接調用得出想要的數據結果。

1、添加簡易Mock

  1. 進入API文檔編輯頁,選中需要編輯的返回結果
  2. 數據類型選擇JSON 或 XML ,在參數列表中填寫字段名和選擇數據類型,若字段名和數據類型命中了智能Mock的規則,則字段名輸入框失去焦點後,系統會自動填充該字段的Mock值。

若mock值已有內容,則變更字段名或數據類型均不會觸發智能Mock。

  1. 無論是否命中智能Mock規則,均可點擊mock輸入框,填寫所需的mock規則。mock輸入框支持填寫數值和mockjs佔位符。

若填寫數值,則調用簡易Mock的時候固定返回該數值;

若填寫mockjs佔位符,系統會根據佔位符的輸入內容實時展示您可能想輸入的值。您點擊下拉選項中的可能值後,該值會快速填入mock輸入框中。

  1. 點擊保存API文檔,所添加的簡易Mock即可被調用。

2、調用簡易 Mock

進入API文檔展示頁,下拉至返回參數模塊,則可見不同的返回結果下會有對應的簡易Mock 鏈接。

點擊 簡易Mock 鏈接最右側的複製按鈕,即可複製到剪貼板,在代碼中直接對該地址發起請求即可得到對應結果的虛擬數據。


高級Mock

Eolink Apikit 強大的自定義請求校驗與響應,便於前後端對接和集成測試等場景如果自動生成的 Mock API 無法滿足需求,Apikit 還提供了高級 Mock,設置某些請求參數作為觸發條件並返回對應的結果,讓 Mock API 有了更廣泛的使用場景,比如更真實地模擬後端來完成集成測試。

1、添加高級Mock

在“高級Mock”頁下,點擊“添加Mock”,即會有添加Mock信息彈窗。可填寫觸發該高級Mock的請求參數,及該高級Mock返回參數信息。高級Mock僅會根據配置請求參數,完全匹配時才會返回所配置的返回參數。



2、調用高級Mock

用户點擊高級Mock列表頁頂部的調用地址,即可複製地址。可把地址黏貼到IDE工具中,調用接口進行調試。

一個API文檔中無論設置了多少條高級Mock,均僅有一個高級Mock調用地址。用户在調用時,根據請求的內容判斷觸發了哪一條的高級Mock設置,並返回對應高級Mock的返回結果。

“如何優雅地Mock數據”是每個前端都應該學會的技巧,在後端數據沒有出來的情況下,還能獲取到和後端約定數據結構一樣的模擬數據的一門技術,以避免後端接口進度滯後影響我們正常的開發 ,提高開發效率。

Eolink Apikit 提供市面最強的 Mock API 能力體系, mock 功能完善,從一個整體 Mock 到一個字段級的 Mock ,適配各種場景,大部分人會將其用於每天的應用,例如前後端項目開發,第三方接口的調試,以及接口的自動化測試,幾個小時就能熟練地運用,學習成本低,不需要額外編寫代碼。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.