在日常的开发中,经常会遇到token超时或非法的处理,这个时候就需要前端根据不同情况处理对应问题。但页面的接口又非常的多,不知道这种异常会从哪个接口抛出,总不可能给所有方法添加相关代码。所以就需要一个统一处理的方法,在此之前需要了解下面这个方法。
ajaxSetup
该方法用于设置ajax的全局默认设置,比如
$.ajaxSetup( {
url: "/index.html" , // 默认URL
async: false , // 默认同步加载
type: "POST" , // 默认使用POST方式
headers: {
// 默认添加请求头
"Author": "CodePlayer" ,
"Powered-By": "CodePlayer"
} ,
error: function(jqXHR, textStatus, errorMsg){
// 出错时默认的处理函数
// jqXHR 是经过jQuery封装的XMLHttpRequest对象
// textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"
// errorMsg 可能为: "Not Found"、"Internal Server Error"等
}
} );
设置了默认值之后,后面所有的ajax请求url ,type,等的默认值均已被ajaxSetup()加上,如果没有设置参数就使用默认值,如果设置了就使用自己设置的参数值
//没有设置参数则使用默认值
$.ajax( );
// 设置了url、type、success、error,就使用自己设置的参数值
// 但async、headers等参数的默认值已被$.ajaxSetup()更改
$.ajax( {
url: "xxxxxxxx" ,
type: "GET" ,
success: function( data, textStatus, jqXHR ){
console.log(data,'返回数据')
} ,
error: function(jqXHR, textStatus, errorMsg){
console.log(errorMsg)
}
});
然后这个要怎么处理token失效呢?需要用到下面这个方法
complete:function //ajax 请求完成激活本事件。这个方法很方便完成ajax 异常的处理。
通过这个方法可以拿到每次请求的返回状态,通过他的errorCode判断他的错误类型从而执行不同的处理方式
//处理token失效
$.ajaxSetup({
contentType:"application/x-www-form-urlencoded;charset=utf-8",
complete:function(XMLHttpRequest,textStatus){
// 通过XMLHttpRequest取得响应结果
var res = XMLHttpRequest.responseText;
try{
var jsonData = JSON.parse(res);
// console.log("ajax",jsonData)
if(jsonData.errorCode == "session_timeout" || jsonData.errorCode == "invalid_login" || jsonData.errorCode == "invalid_token"){
//如果超时就处理 ,指定要跳转的页面(比如登陆页)
that.$message({
type:'error',
offset:4,
message:"身份信息过期,请重新登录!", // type:success/warning/info/error
showClose:true
})
setTimeout(()=>{
需要进行的操作,比如跳转到登录页
that.$router.push({
path:'/'});
},1000)
}else if(jsonData.code == "ok"){
//正常登录,无异常。
}
}catch(e){
}
}
});
如果对请求方法进行了封装,那就可以在封装的方法中处理一下这些错误,如果没有封装就可以使用此方法统一处理。
本人新手一枚,如有错误,请大佬指正!