javascript寫一個ajax自動攔截并下載數據代碼實例

2019-11-19 10:51:33

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript寫一個ajax自動攔截并下載數據代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

代碼如下

<!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">// 自動下載 ajax 的腳本;(function($,flag,host){  if(!flag){    //如果關閉下載數據,則什么也不做,否則會攔截 ajax 請求返回的數據,進行下載    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"); //自動下載數據$.ajax({  url:"https://www.easy-mock.com/mock/5bb02bc0a0afc503f502a292/example/demo/secret",  success(res){    console.log(res);  }})</script></html>

使用原生的 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("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("下載數據失敗", 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})

還可以將這個攔截，寫為一個瀏覽插件：