api-hook，更輕量的接口測(cè)試工具

前言

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

現(xiàn)狀

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

api-hook優(yōu)勢(shì)

1.開箱即用

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

2.輕量方便

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

工具介紹

1.）工具演示

功能說明

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

當(dāng)工具面板可見且處于接口攔截模式下，所有發(fā)起ajax請(qǐng)求的接口返回頁面前都會(huì)被攔截，當(dāng)前處于編輯的接口處于接口請(qǐng)求列表第一位置，且背景有斑馬線滾動(dòng)動(dòng)畫，如果后續(xù)有其他接口響應(yīng)被捕獲，那么新的攔截接口處于編輯等待的狀態(tài)，背景呈現(xiàn)淡藍(lán)色，有底部位移動(dòng)畫提示。當(dāng)接口編輯完成，點(diǎn)擊【確定】后，處于編輯等待狀態(tài)的接口會(huì)自動(dòng)切換成編輯模式，當(dāng)然也可以自行切換。
接口mock

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

2.）環(huán)境要求

該工具采用react開發(fā)，適用的項(xiàng)目也要求使用react技術(shù)框架；此外，工具會(huì)攔截所有ajax請(qǐng)求，因此確保你使用的接口請(qǐng)求是通過ajax發(fā)出的。

3.）使用方式

安裝npm包
npm install api-hook

組件導(dǎo)入
在項(xiàng)目入口文件引入組件

import ApiHook from 'api-hook';

function App() {
return (
"App">

autoFilter
defaultVisiable
allowOrigins={['http://localhost:3000']}
/>

);
}
......
ReactDOM.render(


,
document.getElementById('root')
);

4.）其他說明

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

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

研發(fā)介紹

1.）流程設(shè)計(jì)

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

接口攔截模式下，所有需要被攔截的接口響應(yīng)都會(huì)被api-hook劫持，而不會(huì)對(duì)請(qǐng)求流程做任何處理。在工具提供的界面上可以修改響應(yīng)狀態(tài)碼和接口的具體內(nèi)容，在接口mock模式下，就是通過mockjs實(shí)現(xiàn)數(shù)據(jù)的模擬，mockjs通過自定義MockXMLRequest代理所有匹配請(qǐng)求，實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)。

2.）XMLHttpRequest代理

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

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屬性上，聲明一個(gè)MockXMLHttpRequest對(duì)象，該對(duì)象模擬了XMLHttpRequest的行為和方法，當(dāng)我們使用Mock.mock(…)api時(shí)，執(zhí)行window.XMLHttpRequest = XHR；這里XHR就是MockXMLHttpRequest；

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

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

最后

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