javascript写一个ajax自动拦截并下载数据代码实例
这篇文章主要介绍了javascript写一个ajax自动拦截并下载数据代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
10多年建站经验， 网站建设、成都网站制作客户的见证与正确选择。创新互联提供完善的营销型网页建站明细报价表。后期开发更加便捷高效，我们致力于追求更美、更快、更规范。
代码如下
使用原生的 xhr 和fetch 拦截
// 自动下载 ajax 的脚本
// 命名空间
window.ajax_interceptor_manny = {
settings: {
switchOn: false,
switchQuery:false
},
originalXHR: window.XMLHttpRequest,
myXHR: function() {
console.log(" ---ajax 拦截--- ")
let pageScriptEventDispatched = false;
const modifyResponse = () => {
//this.responseText = overrideTxt;
//this.response = overrideTxt;
if (pageScriptEventDispatched) {
return;
}
pageScriptEventDispatched = true;
ajax_interceptor_manny.download(this.responseText, this.responseURL);
}
// new 一个原生的 XMLHttpRequest 不需要参数,将 xhr 的属性,都复制给this,暴露到外面
const xhr = new ajax_interceptor_manny.originalXHR();
for (let attr in xhr) {
if (attr === 'onreadystatechange') {
xhr.onreadystatechange = (...args) => {
if (this.readyState == 4 && this.status == 200) {
// 请求成功
if (ajax_interceptor_manny.settings.switchOn) {
// 开启拦截
modifyResponse();
}
}
this.onreadystatechange && this.onreadystatechange.apply(this, args);
}
continue;
} else if (attr === 'onload') {
xhr.onload = (...args) => {
// 请求成功
if (ajax_interceptor_manny.settings.switchOn) {
// 开启拦截
modifyResponse();
}
this.onload && this.onload.apply(this, args);
}
continue;
}
if (typeof xhr[attr] === 'function') {
this[attr] = xhr[attr].bind(xhr);
} else {
if (attr === 'responseText' || attr === 'response') {
var k = "_"+attr;
Object.defineProperty(this, attr, {
get: () => this[k] == undefined ? xhr[attr] : this[k],
set: (val) => this[k] = val,
});
} else {
Object.defineProperty(this, attr, {
get: () => xhr[attr],
set: (val) => xhr[attr] = val,
});
}
}
}
},
originalFetch: window.fetch.bind(window),
myFetch: function(...args) {
console.log(" ---fetch 拦截--- ")
return ajax_interceptor_manny.originalFetch(...args).then((response) => {
if (response.ok) {
response.clone().text().then((res) => {
ajax_interceptor_manny.download(res, response.url);
}).catch((e) => {
console.warn(e)
});
}
return response;
});
},
download(data, url) {
try {
if (ajax_interceptor_manny.settings.switchOn) {
if (typeof data == "object") {
data = JSON.stringify(data);
}
var blob = new Blob([data], {
type: 'text/html,charset=UTF-8'
});
window.URL = window.URL || window.webkitURL;
var name = url;
if(!(url.indexOf("http://") >= 0 || url.indexOf("https://") >= 0)){
//不存在域名
url = window.origin + url; //手动添加一个，避免URL解析出错
}
try {
var u = new URL(url);
name = u.pathname;
var search = u.search.replace("?","");
if(ajax_interceptor_manny.settings.switchQuery && search){
//需要带上 get 参数
name = name + "$"+ search;
}
} catch (e) {console.warn(e)}
name = name.replace(new RegExp("//","g"),"/");
name = name.replace(new RegExp("/","g"), "_");
name = name + ".json";
var a = document.createElement("a");
a.setAttribute("download", name || "data.json");
a.href = URL.createObjectURL(blob);
a.click();
}
} catch (e) {
console.error("下载数据失败", e);
}
},
setSetting(data) {
if (typeof data !== "object") {
return;
}
//设置环境
for (var i in data) {
ajax_interceptor_manny.settings[i] = data[i];
}
},
init() {
window.XMLHttpRequest = ajax_interceptor_manny.myXHR;
window.fetch = ajax_interceptor_manny.myFetch;
}
}
ajax_interceptor_manny.init();
ajax_interceptor_manny.setSetting({
switchOn:true
})还可以将这个拦截，写为一个浏览插件：
插件代码地址： https://gitee.com/muand/ajaxDown/tree/master/ajaxDown
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网站栏目：javascript写一个ajax自动拦截并下载数据代码实例
文章起源：http://mswzjz.cn/article/jdjjoh.html