Ajax-hook拦截全局ajax请求操作

HHTjim 部落格

发布于 2022-09-26 10:43:23

1.6K0

发布于 2022-09-26 10:43:23

文章被收录于专栏：HHTjim'S 部落格

Ajax-hook拦截全局ajax请求操作

作者：matrix 被围观: 9,614 次发布时间：2017-12-13 分类：零零星星 | 3 条评论 »

这是一个创建于 1723 天前的主题，其中的信息可能已经有所发展或是发生改变。

github项目地址：https://github.com/wendux/[ajax](https://www.hhtjim.com/tag/ajax)-hook/blob/master/src/ajaxhook.js

项目页面中有很多ajax接口请求，每次需要手动判断数据code进行错误消息提示，再加上有些使用jQuery，有些使用fetch操作，要是能有一个统一的$.ajaxSetup那就爽翻。搜索下ajax的全局拦截，有大神写好了，打开即食，NICE。代码量不大，大致的原理好像是把内置的XMLHttpRequest对象给代理了，克隆一份，进行伪装。请求操作都是通过的代理层，拦截、修改操作也都是可以的～

使用

加载ajaxhook.js文件，代码中给浏览器window对象注册全局方法：hookAjax，unHookAjax。

hookAjax //挂载拦截钩子
unHookAjax（） //取消ajax请求代理

拦截处理操作

hookAjax方法注册拦截的切入点，执行回调操作。

这里用到onload 即请求完成获取数据的时候。

代码是放在vue项目里面，手动挂载DOM。若出现第一次错误请求没有成功拦截的情况，那就需要把代码放置在头部。

        //全局监听ajax请求，用于提示会话过期，和其他的错误消息。
        if ('function' === typeof(hookAjax)) {
            hookAjax({
                onload: function (xhr) {
                    if (xhr.status >= 500) return layer.alert('服务器报错，请联系管理员！'+"</br>请求地址：</br>"+xhr.responseURL, {icon: 2, title: '无形之刃 <3'});
                    var data = JSON.parse(xhr.responseText);
                    if (!!data) {
                        if (data.code !== 0) {
                            if (!!data.msg) {
                                layer.alert(data.msg, {icon: 2, title: 'ERROR'});
                            }
                        }
                    }
                }
            })
        }

拦截函数如：onload 返回值是一个boolean，如果为true则会阻断ajax请求，默认为false,不会阻断请求。

参考：

http://www.jianshu.com/p/9b634f1c9615

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

ajax