); } ...... ReactDOM.render( 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吧，有問題歡迎交流。 福祿ICH·架構組 福