github项目地址:https://github.com/wendux/ajax-hook/blob/master/src/ajaxhook.js
项目页面中有很多ajax接口请求,每次需要手动判断数据code进行错误消息提示,再加上有些使用jQuery,有些使用fetch操作,要是能有一个统一的$.ajaxSetup那就爽翻。搜索下ajax的全局拦截,有大神写好了,打开即食,NICE。代码量不大,大致的原理好像是把内置的XMLHttpRequest对象给代理了,克隆一份,进行伪装。请求操作都是通过的代理层,拦截、修改操作也都是可以的~
使用
加载文件,代码中给浏览器window对象注册全局方法:hookAjax,unHookAjax。
hookAjax //挂载拦截钩子
unHookAjax() //取消ajax请求代理
拦截处理操作
方法注册拦截的切入点,执行回调操作。
这里用到 即请求完成获取数据的时候。
代码是放在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'});
}
}
}
}
})
}
拦截函数 如: 返回值是一个boolean,如果为则ajax请求,默认为false,不会阻断请求。
参考:
http://www.jianshu.com/p/9b634f1c9615