前言

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

現(xiàn)狀

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

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

1.開(kāi)箱即用

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

2.輕量方便

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

工具介紹

1.）工具演示

功能說(shuō)明

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

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

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

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

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

3.）使用方式

安裝npm包
npm install api-hook

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

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.）其他說(shuō)明

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

組件參數(shù)
||~屬性||~說(shuō)明||~默認(rèn)值||
||autoFilter ||是否默認(rèn)攔截接口 || false||
||defaultVisiable ||工具面板是否默認(rèn)可見(jiàn) ||false ||
||allowOrigins ||容許開(kāi)啟工具功能的站點(diǎn)，為數(shù)組類(lèi)型，只有配置此項(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模式下，就是通過(guò)mockjs實(shí)現(xiàn)數(shù)據(jù)的模擬，mockjs通過(guò)自定義MockXMLRequest代理所有匹配請(qǐng)求，實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)。

2.）XMLHttpRequest代理

由于需要修改XMLHttpRequest的默認(rèn)行為，因此項(xiàng)目代碼實(shí)際訪(fǎng)問(wèn)的是其代理對(duì)象，在接口攔截/mock下，都是重寫(xiě)XMLHttpRequest對(duì)象，具體實(shí)現(xiàn)通過(guò)ajax-hook和mockjs來(lái)實(shí)現(xiàn)，接下來(lái)我們探究一下其中原理；
ajax-hook
在接口攔截模式，通過(guò)ajax-hook提供接口代理XMLHttpRequest原生對(duì)象，監(jiān)聽(tīng)所有原生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代理}

最后

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。