由于需要修改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·架构组
福袋
