api-hook，更輕量的接口測試工具

前言

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

現狀

前面說到了工做中遇到的接口測試場景，固然目前也有不少工具能夠幫咱們實現接口的測試，如使用普遍的postman和fiddler等工具，功能強大，可安裝插件或自定義腳本，解決數據測試的問題，好比咱們想要mock服務，參考https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/ 便可，網上也有不少使用教程，若是願意花些時間的話，必定能給工做帶來效率的提高，好吧，前提是你要花些時間。react

api-hook優點

1.開箱即用

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

2.輕量方便

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

工具介紹

1.）工具演示

功能說明 【1】是接口攔截/mock的切換區域，【2】能夠關閉api-hook工具面板，【3】是工具面板顯示/隱藏開關； 接口攔截 當工具面板可見且處於接口攔截模式下，全部發起ajax請求的接口返回頁面前都會被攔截，當前處於編輯的接口處於接口請求列表第一位置，且背景有斑馬線滾動動畫，若是後續有其餘接口響應被捕獲，那麼新的攔截接口處於編輯等待的狀態，背景呈現淡藍色，有底部位移動畫提示。當接口編輯完成，點擊【肯定】後，處於編輯等待狀態的接口會自動切換成編輯模式，固然也能夠自行切換。 接口mock 接口mock集成mockjs的功能，所以template配置可參考mockjs官網說明，這裏須要說明的是template字段須要遵循JSON格式規範。ajax

2.）環境要求

該工具採用react開發，適用的項目也要求使用react技術框架；此外，工具會攔截全部ajax請求，所以確保你使用的接口請求是經過ajax發出的。npm

3.）使用方式

安裝npm包 npm install api-hookjson

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

import ApiHook from 'api-hook';

function App() {
    return (
        <div className="App">
            <Main />
            <ApiHook
                autoFilter
                defaultVisiable
                allowOrigins={['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 }) =&gt; {
            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吧，有問題歡迎交流。