http拦截的原理

在这里插入图片描述
1、权限拦截原理:
说明:常用的是 onload,onunload 事件和 Mutation Events 事件。 onload 和 onunload 事件可以作用在 window,frame,img 和 object 等对象上,利用 onload 可以在对象载入前执行一些操作 ,onunload 事件可以跟踪浏览器关闭前执行操作
方式:利用 Onload 事件的拦截,我们基本上解决了静态 HTML 内容的拦截,而对于脚本操作的 HTML 变化,我们就可以通过 Mutation Event 来进行解决。通过 DOMAttrModified、DOMNodeInserted事件可以很好地跟踪和拦截 HTML 的变化;
例子:
功能:跟踪 src、action、href 等属性的变化
document.addEventListener(“DOMAttrModified”, AttributeNodeModified, false);
function AttributeNodeModified(evt)
{
if(evt.attrName == “href”) { }
if(evt.attrName == “src”) { }
if(evt.attrName == “action”) { }
}
2.利用JavaScript 平台上的 AOP 方案主要有 Ajaxpectiii、jQuery AOPiv等。这些代码库主要功能是给指定对象的指定方法添加 Before, After,Around 等,从而达到拦截对象方法调用的目的;
并且支持正则搜索方法名称。
例子:

var thing = {
    makeGreeting: function(text) {
        return 'Hello ' + text + '!'; 
    }
}
function aopizeAdvice(args) { 
    args[0] = 'AOP ' + args[0];return args;
}
function shoutAdvice(result) {
    return result.toUpperCase();
} 
Ajaxpect.addBefore(thing, 'makeGreeting', aopizeAdvice); 
Ajaxpect.addAfter(thing, /make*/, shoutAdvice);
service.interceptors.response.use(
    response => {
        const code = response.status
        if (code < 200 || code > 300) {
            Notification.error({
                title: response.message
            })
            return Promise.reject('error')
        } else {
            return response.data
        }
    },

状态码(拦截时判断code的状态):
200-299:数据请求成功后返回;
300-399:请求URL目标重定向;
400:客户端错误(接口URL错误,传递的参数错误)
500:服务端错误(网络异常,数据库异常、服务重启等)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值