接口异常的统一处理
tjuking opened this issue · comments
背景
前端需要面对各式各样的客户端环境,还需要考虑不同的网络状况。
接口的请求并不总是一帆风顺的,有可能在客户端这边出问题了,也有可能服务器端出问题了,甚至也有可能中间的传输过程出了问题。
所以需要对接口的异常进行捕获和处理以给用户更加有效的反馈,但如果项目中接口比较多的话,那我们就应该考虑如何去实现异常的统一处理了。
如何做
以依赖jQuery
项目举例,通常是用$.ajax()
方法去请求接口数据。
我们知道可以通过ajax的返回值再调用jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
来处理请求的异常(超时、中止、解析错误等),如下所示:
$.ajax({
...
}).fail(function(jqXHR, textStatus, errorThrown){
if(textStatus == "timeout"){
alert("请求超时");
}else if(textStatus == "parsererror"){
alert("数据解析失败");
}else if(textStatus == "abort"){
alert("请求被中止");
}else{
alert("请求出错:" + textStatus + "(错误码是" + jqXHR.status + ")");
}
});
可能在某个接口处理异常时是直接弹窗提示,有的接口可能需要在页面上打印出错信息,如何统一这种需求呢?
编写一个共用函数:
function errorHandler(args, callback) {
var description;
var code;
var message;
var unknown = "未知";
//容错处理
if (args && args.length >= 2) {
code = args[0].status || unknown;
description = args[1] || unknown;
} else {
code = unknown;
description = unknown;
}
//调用回调函数
if (callback) {
if(description == "timeout"){
message = "请求超时";
}else if(description == "parsererror"){
message = "数据解析失败";
}else if(description == "abort"){
message = "请求未发出";
}else{
message = "请求出错:" + description + " (错误码:" + code + ")";
}
callback(message);
}
}
在实际接口中调用:
$.ajax({
...
}).fail(function(){
errorHandler(arguments, function(message){
alert(message);
});
});