热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端监控数据网络(要求阻拦)

所谓web,纵然你我素未谋面,便知志趣相投;深居简出,亦知天下之大。01—为何阻拦要求如今的web运用,大都是经由过程要求(http)去猎取资本,拿到资本后再显现给用户,一个页面中

所谓web,纵然你我素未谋面,便知志趣相投;深居简出,亦知天下之大。

01 — 为何阻拦要求

如今的web运用,大都是经由过程要求(http)去猎取资本,拿到资本后再显现给用户,一个页面中能够有多个如许的要求。每一次要求的最先,守候,完成,非常都邑有相应的状况来标识。我们在本身的框架中一般都邑运用一个全局过滤器,来阻拦要求,目标迥然不同:

  • 在发送要求之前,修正要求参数,增加要求头
  • 要求发送中的进度盘算(一般是文件上传)
  • 要求失足后的捕捉
  • 要求完毕后,处置惩罚背景返回数据结构,举行适配
  • ……

看看要求的全部流程图:

《前端监控数据网络(要求阻拦)》

而我们最经常使用的发送要求的就是XMLHttpRequest。

XMLHttpRequest.readyState的五种停当状况:

  • 0:要求未初始化(还没有挪用 open())。
  • 1:要求已竖立,然则还没有发送(还没有挪用 send())。
  • 2:要求已发送,正在处置惩罚中(一般如今能够从相应中猎取内容头)。
  • 3:要求在处置惩罚中;一般相应中已有部份数据可用了,然则服务器还没有完成相应的天生。
  • 4:相应已完成;您能够猎取并运用服务器的相应了。

而且XMLHttpRequest还供应了每一个阶段的事宜:

  • abort

    假如要求中断,会触发abort事宜。

  • error

    收集毛病(如太多重定向)会阻挠要求完成,会触发error事宜。

  • load

    当事宜完成,会触发load事宜。

  • loadend

    当一个要求完成,不管胜利(load)或许不胜利(abort/error)后触发

  • loadstart

    当挪用send()时,触发单个loadstart事宜。

  • progress

    当守候服务器的相应时,XHR对象会发作progress事宜。一般每隔50毫秒摆布,所以能够运用这事宜给用户反应要求的进度。

  • timeout

    当守候服务器的相应超时会触发。

02 — 怎样阻拦要求

了解了XMLHttpRequest的要求流程后,我们就能够最先去阻拦浏览器发出的要求,去做我们想做的事。

体式格局一:

(function (xhr) {
// Capture request before any network activity occurs:
var send = xhr.send;
xhr.send = function (data) {
this.addEventListener('loadstart', onLoadStart);
this.addEventListener('loadend', onLoadEnd);
this.addEventListener('error', onError);
return send.apply(this, arguments);
};
})(XMLHttpRequest.prototype);

这类是最简朴直接的体式格局,修正XMLHttpRequest的原型,在发送要求时开启事宜监听。大多数情况下都是没什么大问题的,但厥后发如今Angular4+以上版本中如许去阻拦,要求触发loadend事宜后猎取到的要求相应胜利与否状况一直为false,由于Angualr2厥后的版本也运用事宜监听来处置惩罚阻拦,有些处所就争执了。

体式格局二:

出现问题总要处理吧,然后就采纳要领一的晋级版本,完整重写XMLHttpRequest。

(function () {
// create XMLHttpRequest proxy object
var oldXMLHttpRequest = XMLHttpRequest;
// define constructor for my proxy object
window.XMLHttpRequest = function () {
var actual = new oldXMLHttpRequest();
var self = this;
this.Onreadystatechange= null;
// this is the actual handler on the real XMLHttpRequest object
actual.Onreadystatechange= function () {
if (this.readyState == 1) {
onLoadStart.call(this);
} else if (this.readyState == 4) {
if(this.status==200)
onLoadEnd.call(this);
else{
onError.call(this);
}
}
if (self.onreadystatechange) {
return self.onreadystatechange();
}
};


// add all proxy getters
["status", "statusText", "responseType", "response",
"readyState", "responseXML", "upload"
].forEach(function (item) {
Object.defineProperty(self, item, {
get: function () {
return actual[item];
},
set: function (val) {
actual[item] = val;
}
});
});


// add all proxy getters/setters
["ontimeout, timeout", "withCredentials", "onload", "onerror", "onprogress"].forEach(function (item) {
Object.defineProperty(self, item, {
get: function () {
return actual[item];
},
set: function (val) {
actual[item] = val;
}
});
});


// add all pure proxy pass-through methods
["addEventListener", "send", "open", "abort", "getAllResponseHeaders",
"getResponseHeader", "overrideMimeType", "setRequestHeader", "removeEventListener"
].forEach(function (item) {
Object.defineProperty(self, item, {
value: function () {
return actual[item].apply(actual, arguments);
}
});
});
}
})();

03 — 项目实战

如今我们能够宁神的阻拦浏览器发出的要求了,妈妈再也不必忧郁我的进修了,哈哈。说一千道一万,来点干货,直接看项目。

传送门:web-monitor

《前端监控数据网络(要求阻拦)》

喜好请点个赞呗

或许去https://github.com/kisslove/w… Star一下

或许打赏一下

再或许……

哈哈,主意有点多了。

《前端监控数据网络(要求阻拦)》


推荐阅读
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • Hybrid 应用的后台接口与管理界面优化
    本文探讨了如何通过优化 Hybrid 应用的后台接口和管理界面,提升用户体验。特别是在首次加载 H5 页面时,为了减少用户等待时间和流量消耗,介绍了离线资源包的管理和分发机制。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 网络攻防实战:从HTTP到HTTPS的演变
    本文通过一系列日记记录了从发现漏洞到逐步加强安全措施的过程,探讨了如何应对网络攻击并最终实现全面的安全防护。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • PostgreSQL 10 离线安装指南
    本文详细介绍了如何在无法联网的服务器上进行 PostgreSQL 10 的离线安装,并涵盖了从下载安装包到配置远程访问的完整步骤。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 在Python开发过程中,随着项目数量的增加,不同项目依赖于不同版本的库,容易引发依赖冲突。为了避免这些问题,并保持开发环境的整洁,可以使用Virtualenv和Virtualenvwrapper来创建和管理多个隔离的Python虚拟环境。 ... [详细]
author-avatar
宋雨甄_938
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有