当前位置：Gxlcms > JavaScript > javascript写一个ajax自动拦截并下载数据代码实例

javascript写一个ajax自动拦截并下载数据代码实例

时间：2021-07-01 10:21:17 帮助过：37人阅读

这篇文章主要介绍了javascript写一个ajax自动拦截并下载数据代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title></title>
  8. </head>
  9. <body>
  10. </body>
  11. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  12. <script type="text/javascript">
  13. // 自动下载 ajax 的脚本
  14. ;(function($,flag,host){
  15.   if(!flag){
  16.     //如果关闭下载数据,则什么也不做,否则会拦截 ajax 请求返回的数据,进行下载
  17.     return ;
  18.   }
  19.   var ajax = $.ajax; //缓存原始的 ajax
  20.   $.ajax = function(opt){
  21.     var success = opt.success || function(){};
  22.     var url = opt.url || "";
  23.     opt.success = function(res){
  24.       try{
  25.         var name = url.split("?")[0];
  26.         if(host){
  27.           name = name.replace(host,"");
  28.         }
  29.         name = name.replace(/\//g,"_");
  30.         downData(res,`${name}.json`);
  31.       }catch(e){
  32.         console.warn(e);
  33.       }
  34.       success(res);
  35.     }
  36.     return ajax(opt);
  37.   }
  38.   function downData(data,name){
  39.     if(typeof data == "object"){
  40.       data = JSON.stringify(data);
  41.     }
  42.     var blob = new Blob([data], {
  43.      type: 'text/html,charset=UTF-8' 
  44.     });
  45.     window.URL = window.URL || window.webkitURL;
  46.     var a = document.createElement("a");
  47.     a.setAttribute("download",name || "data.json");
  48.     a.href = URL.createObjectURL(blob);
  49.     a.click();
  50.   }
  51. })($,true,"https://www.easy-mock.com");
  52.  
  53. //自动下载数据
  54. $.ajax({
  55.   url:"https://www.easy-mock.com/mock/5bb02bc0a0afc503f502a292/example/demo/secret",
  56.   success(res){
  57.     console.log(res);
  58.   }
  59. })
  60. </script>
  61. </html>

使用原生的 xhr 和fetch 拦截

  1. // 自动下载 ajax 的脚本
  2.   // 命名空间
  3.   window.ajax_interceptor_manny = {
  4.     settings: {
  5.       switchOn: false,
  6.       switchQuery:false
  7.     },
  8.     originalXHR: window.XMLHttpRequest,
  9.     myXHR: function() {
  10.       console.log(" ---ajax 拦截--- ")
  11.       let pageScriptEventDispatched = false;
  12.       const modifyResponse = () => {
  13.         //this.responseText = overrideTxt;
  14.         //this.response = overrideTxt;
  15.         if (pageScriptEventDispatched) {
  16.           return;
  17.         }
  18.         pageScriptEventDispatched = true;
  19.         ajax_interceptor_manny.download(this.responseText, this.responseURL);
  20.       }
  21.  
  22.       // new 一个原生的 XMLHttpRequest 不需要参数,将 xhr 的属性,都复制给this,暴露到外面
  23.       const xhr = new ajax_interceptor_manny.originalXHR();
  24.  
  25.       for (let attr in xhr) {
  26.         if (attr === 'onreadystatechange') {
  27.           xhr.onreadystatechange = (...args) => {
  28.             if (this.readyState == 4 && this.status == 200) {
  29.               // 请求成功
  30.               if (ajax_interceptor_manny.settings.switchOn) {
  31.                 // 开启拦截
  32.                 modifyResponse();
  33.               }
  34.             }
  35.             this.onreadystatechange && this.onreadystatechange.apply(this, args);
  36.           }
  37.           continue;
  38.         } else if (attr === 'onload') {
  39.           xhr.onload = (...args) => {
  40.             // 请求成功
  41.             if (ajax_interceptor_manny.settings.switchOn) {
  42.               // 开启拦截
  43.               modifyResponse();
  44.             }
  45.             this.onload && this.onload.apply(this, args);
  46.           }
  47.           continue;
  48.         }
  49.  
  50.         if (typeof xhr[attr] === 'function') {
  51.           this[attr] = xhr[attr].bind(xhr);
  52.         } else {
  53.           if (attr === 'responseText' || attr === 'response') {
  54.             var k = "_"+attr;
  55.             Object.defineProperty(this, attr, {
  56.               get: () => this[k] == undefined ? xhr[attr] : this[k],
  57.               set: (val) => this[k] = val,
  58.             });
  59.           } else {
  60.             Object.defineProperty(this, attr, {
  61.               get: () => xhr[attr],
  62.               set: (val) => xhr[attr] = val,
  63.             });
  64.           }
  65.         }
  66.       }
  67.     },
  68.     originalFetch: window.fetch.bind(window),
  69.     myFetch: function(...args) {
  70.       console.log(" ---fetch 拦截--- ")
  71.       return ajax_interceptor_manny.originalFetch(...args).then((response) => {
  72.         if (response.ok) {
  73.           response.clone().text().then((res) => {
  74.             ajax_interceptor_manny.download(res, response.url);
  75.           }).catch((e) => {
  76.             console.warn(e)
  77.           });
  78.         }
  79.         return response;
  80.       });
  81.     },
  82.     download(data, url) {
  83.       try {
  84.         if (ajax_interceptor_manny.settings.switchOn) {
  85.           if (typeof data == "object") {
  86.             data = JSON.stringify(data);
  87.           }
  88.           var blob = new Blob([data], {
  89.             type: 'text/html,charset=UTF-8'
  90.           });
  91.           window.URL = window.URL || window.webkitURL;
  92.  
  93.           var name = url;
  94.           if(!(url.indexOf("http://") >= 0 || url.indexOf("https://") >= 0)){
  95.             //不存在域名
  96.             url = window.origin + url; //手动添加一个，避免URL解析出错
  97.           }
  98.           try {
  99.             var u = new URL(url);
  100.             name = u.pathname;
  101.             var search = u.search.replace("?","");
  102.             if(ajax_interceptor_manny.settings.switchQuery && search){
  103.               //需要带上 get 参数
  104.               name = name + "$"+ search;
  105.             }
  106.           } catch (e) {console.warn(e)}
  107.           name = name.replace(new RegExp("//","g"),"/");
  108.           name = name.replace(new RegExp("/","g"), "_");
  109.           name = name + ".json";
  110.           var a = document.createElement("a");
  111.           a.setAttribute("download", name || "data.json");
  112.           a.href = URL.createObjectURL(blob);
  113.           a.click();
  114.         }
  115.       } catch (e) {
  116.         console.error("下载数据失败", e);
  117.       }
  118.  
  119.     },
  120.  
  121.     setSetting(data) {
  122.       if (typeof data !== "object") {
  123.         return;
  124.       }
  125.       //设置环境
  126.       for (var i in data) {
  127.         ajax_interceptor_manny.settings[i] = data[i];
  128.       }
  129.     },
  130.     init() {
  131.       window.XMLHttpRequest = ajax_interceptor_manny.myXHR;
  132.       window.fetch = ajax_interceptor_manny.myFetch;
  133.     }
  134.   }
  135. ajax_interceptor_manny.init();
  136. ajax_interceptor_manny.setSetting({
  137.   switchOn:true
  138. })

还可以将这个拦截，写为一个浏览插件：

插件代码地址： https://gitee.com/muand/ajaxDown/tree/master/ajaxDown

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！