基于原生JS封装请求拦截器

封装XMLHttpRequest对象拦截方法

function proxyRequest() {
const _xhr = window.XMLHttpRequest;
const proxies = [];
const events = {};
const cache = { _this: null };
window.XMLHttpRequest = function () {
cache._xhr = new _xhr();
proxies.forEach((func) => {
try {
func(cache._xhr);
} catch (e) {}
});
Object.keys(events).forEach((name) => {
events[name].forEach((proxy) => {
cache._xhr.addEventListener(name, (evt) =>
proxy?.func(evt, cache._xhr)
);
});
});
return cache._xhr;
};
return new chain();
function use(func) {
proxies.push(func);
return cache._this;
}
function on(name, func) {
events[name] = [...(events[name] || []), { name, func }];
return cache._this;
}
function load(func) {
return this.on("load", (evt) => {
const text = cache._xhr?.responseText;
func(toJSON(text) || text, evt, cache._xhr);
});
}
function chain() {
_this = this;
this.proxies = proxies;
this.events = events;
this.use = use;
this.on = on;
this.load = load;
}
function toJSON(text) {
try {
return JSON.parse(text);
} catch (e) {
return null;
}
}
}
/**
* 调用示例：
*/
const instance = proxyRequest();
instance.use((xhr) => {
xhr.addEventListener("load", () => {
console.log(JSON.parse(xhr.responseText)
});
});
instance.on("load", (evt, xhr) => {
console.log(JSON.parse(xhr.responseText)
});
instance.load((data, evt, xhr) => {
console.log(data);
});


封装Fetch对象拦截方法

function proxyFetch() {
let _this = null;
const _fetch = window.fetch;
const proxies = [];
window.fetch = function (...args) {
const res = _fetch(...args);
res.then((res) => {
proxies.forEach((func) => {
try {
func(res.clone());
} catch (e) {}
});
});
return res;
};
return new chain();
function chain() {
_this = this;
this.proxies = [];
this.use = use;
}
function use(func) {
proxies.push(func);
return _this;
}
}
/**
* 调用示例:
*/
const fetchInstance = proxyFetch();
fetchInstance.use(async (res) => {
console.log(await res.json());
});