接口异常的统一处理

[tjuking]

背景

前端需要面对各式各样的客户端环境，还需要考虑不同的网络状况。

接口的请求并不总是一帆风顺的，有可能在客户端这边出问题了，也有可能服务器端出问题了，甚至也有可能中间的传输过程出了问题。

所以需要对接口的异常进行捕获和处理以给用户更加有效的反馈，但如果项目中接口比较多的话，那我们就应该考虑如何去实现异常的统一处理了。

如何做

以依赖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);
        });
    });