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

程序员文章站 2023-11-11 15:55:28

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

这篇文章主要介绍了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("//","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
})

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

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

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

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

上一篇： centos中yum命令删除还原的补救方法介绍

下一篇：通过vue写一个瀑布流插件代码实例