前言

在網站的開發過程中，接口聯調和測試是至關重要的一環，其直接影響產品的核心價值，而目前也有許多技術方案和工具加持，讓我們的開發測試工作更加便捷。接口作為數據傳輸的重要載體，數據格式和內容具有多樣性，從宏觀的角度上看，分為成功和失敗，這兩種狀態又可以細分，例如失敗對應的狀態碼有5/4，不同的狀態碼代表的問題是不一樣的，都需要一一考慮，成功返回后，所有字段返回結果又是排列組合形式，那么問題就來了，是否能在條件容許的情況下快速覆蓋所有的場景呢，從技術的角度上講，問題不大，但是有時候成本卻有點高，那怎么以一種低成本的方式快速實現呢，本文將圍繞這個問題展開討論，并嘗試提供一種解決方案。

現狀

前面說到了工作中遇到的接口測試場景，當然目前也有很多工具可以幫我們實現接口的測試，如使用廣泛的postman和fiddler等工具，功能強大，可安裝插件或自定義腳本，解決數據測試的問題，比如我們想要mock服務，參考https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/?即可，網上也有很多使用教程，如果愿意花些時間的話，一定能給工作帶來效率的提升，好吧，前提是你要花些時間。

api-hook優勢

1.開箱即用

有時候我只想簡單修改一下接口數據，但是需要我安裝軟件，找教程搗騰半天，時間花費了，效率卻降低了，api-hook引入項目中，通過簡單配置(真的很簡單)即可使用，所有操作所見即所得，沒有學習成本；

2.輕量方便

工具足夠輕量，不需要另起服務，不需要單獨維護，它就是你頁面的一部分而已，你可以像控制一個div一樣去控制它；

工具介紹

1.）工具演示

功能說明

【1】是接口攔截/mock的切換區域，【2】可以關閉api-hook工具面板，【3】是工具面板顯示/隱藏開關；
接口攔截

當工具面板可見且處于接口攔截模式下，所有發起ajax請求的接口返回頁面前都會被攔截，當前處于編輯的接口處于接口請求列表第一位置，且背景有斑馬線滾動動畫，如果后續有其他接口響應被捕獲，那么新的攔截接口處于編輯等待的狀態，背景呈現淡藍色，有底部位移動畫提示。當接口編輯完成，點擊【確定】后，處于編輯等待狀態的接口會自動切換成編輯模式，當然也可以自行切換。
接口mock

接口mock集成mockjs的功能，因此template配置可參考mockjs官網說明，這里需要說明的是template字段需要遵循JSON格式規范。

2.）環境要求

該工具采用react開發，適用的項目也要求使用react技術框架；此外，工具會攔截所有ajax請求，因此確保你使用的接口請求是通過ajax發出的。

3.）使用方式

安裝npm包
npm install api-hook

組件導入
在項目入口文件引入組件

import ApiHook from 'api-hook';function App() {return (<div className="App"><Main /><ApiHookautoFilterdefaultVisiableallowOrigins={['http://localhost:3000']}/></div>);}......ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));

4.）其他說明

支持響應類型
接口的響應類型目前只支持text/json，因此接口如果是document，blob，arraybuffer等類型，則工具不做處理；

組件參數
||~屬性||~說明||~默認值||
||autoFilter ||是否默認攔截接口 || false||
||defaultVisiable ||工具面板是否默認可見 ||false ||
||allowOrigins ||容許開啟工具功能的站點，為數組類型，只有配置此項，才能在項目中使用工具 || ||

研發介紹

1.）流程設計

工具提供了兩種模式，接口mock和接口攔截，不同的模式內部流程稍有不同，具體如下：

接口攔截模式下，所有需要被攔截的接口響應都會被api-hook劫持，而不會對請求流程做任何處理。在工具提供的界面上可以修改響應狀態碼和接口的具體內容，在接口mock模式下，就是通過mockjs實現數據的模擬，mockjs通過自定義MockXMLRequest代理所有匹配請求，實現數據的響應。

2.）XMLHttpRequest代理

由于需要修改XMLHttpRequest的默認行為，因此項目代碼實際訪問的是其代理對象，在接口攔截/mock下，都是重寫XMLHttpRequest對象，具體實現通過ajax-hook和mockjs來實現，接下來我們探究一下其中原理；
ajax-hook
在接口攔截模式，通過ajax-hook提供接口代理XMLHttpRequest原生對象，監聽所有原生xhr對象屬性，確保ajax-hook回調先執行，其次是ajax請求的回調;

XMLHttpRequest = function () {var xhr = new window[realXhr];for (var attr in xhr) {var type = "";try {type = typeof xhr[attr]} catch (e) {}if (type === "function") {// hookAjax methods of xhr, such as `open`、`send` ...this[attr] = hookFunction(attr);} else {Object.defineProperty(this, attr, {get: getterFactory(attr),set: setterFactory(attr),enumerable: true})}}......}

mockjs
mockjs將原生XMLHttpRequest保存在window._XMLHttpRequest屬性上，聲明一個MockXMLHttpRequest對象，該對象模擬了XMLHttpRequest的行為和方法，當我們使用Mock.mock(…)api時，執行window.XMLHttpRequest = XHR；這里XHR就是MockXMLHttpRequest；

代理對象切換
工具在不同模式下，使用不同的代理對象，在切換攔截和mock的時候，需要執行重置原生XMLHttpRequest和初始化代理對象；

// mock模式registerMock() {unProxy(); // 解除ajax-hook代理const { mockList } = this.state;mockList.forEach(({ url, template }) => {Mock.mock(url, template); // mock注冊});}// 攔截模式unRegisterMock() {if (window._XMLHttpRequest) { // mock代理，重置原生ajax對象window.XMLHttpRequest = window._XMLHttpRequest;}ajaxProxy(); // 啟用ajax-hook代理}

最后

該工具可供前端開發人員和測試人員使用，力求提供一種更便捷的方式去實現數據的個性化修改。此次只推出了基礎功能，后續還將加入更多新特性，本倉庫地址：https://github.com/lanpangzi-zkg/api-hook ，如果覺得還行就點個star吧，有問題歡迎交流。

總結

以上是生活随笔為你收集整理的api-hook，更轻量的接口测试工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。