您好,登錄后才能下訂單哦!
這篇文章主要介紹了javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
代碼如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> </body> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // 自動(dòng)下載 ajax 的腳本 ;(function($,flag,host){ if(!flag){ //如果關(guān)閉下載數(shù)據(jù),則什么也不做,否則會(huì)攔截 ajax 請(qǐng)求返回的數(shù)據(jù),進(jìn)行下載 return ; } var ajax = $.ajax; //緩存原始的 ajax $.ajax = function(opt){ var success = opt.success || function(){}; var url = opt.url || ""; opt.success = function(res){ try{ var name = url.split("?")[0]; if(host){ name = name.replace(host,""); } name = name.replace(/\//g,"_"); downData(res,`${name}.json`); }catch(e){ console.warn(e); } success(res); } return ajax(opt); } function downData(data,name){ 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 a = document.createElement("a"); a.setAttribute("download",name || "data.json"); a.href = URL.createObjectURL(blob); a.click(); } })($,true,"https://www.easy-mock.com"); //自動(dòng)下載數(shù)據(jù) $.ajax({ url:"https://www.easy-mock.com/mock/5bb02bc0a0afc503f502a292/example/demo/secret", success(res){ console.log(res); } }) </script> </html>
使用原生的 xhr 和fetch 攔截
// 自動(dòng)下載 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 一個(gè)原生的 XMLHttpRequest 不需要參數(shù),將 xhr 的屬性,都復(fù)制給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) { // 請(qǐng)求成功 if (ajax_interceptor_manny.settings.switchOn) { // 開啟攔截 modifyResponse(); } } this.onreadystatechange && this.onreadystatechange.apply(this, args); } continue; } else if (attr === 'onload') { xhr.onload = (...args) => { // 請(qǐng)求成功 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; //手動(dòng)添加一個(gè),避免URL解析出錯(cuò) } try { var u = new URL(url); name = u.pathname; var search = u.search.replace("?",""); if(ajax_interceptor_manny.settings.switchQuery && search){ //需要帶上 get 參數(shù) name = name + "$"+ search; } } catch (e) {console.warn(e)} name = name.replace(new RegExp("http://","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("下載數(shù)據(jù)失敗", e); } }, setSetting(data) { if (typeof data !== "object") { return; } //設(shè)置環(huán)境 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 })
還可以將這個(gè)攔截,寫為一個(gè)瀏覽插件:
插件代碼地址: https://gitee.com/muand/ajaxDown/tree/master/ajaxDown
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。