项目分享九：客户端的异常处理

一、异常的处理

异常处理，是所有程序都应该有的功能，尤其是网络异常，在 APP 更是常见。我们来看看 ChiTu Store 是如何处理异常。异常主要分两种情况：

1、服务端引发的异常，也就是服务端返回来的错误信息，当服务端异常后，返回的错误JSON信息为：

{
     Type: 'ErrorObject',
     Code:'xxxx' 
}

2、客户端出现的异常，客户端出现的异常，绝大数为网络异常，ChiTu Store 主要处理这类的异常。

我们现在要看一下 ChiTu Store 是如何处理的。

二、重写 Ajax 函数

通过重写 ajax 函数，来捕获服务端返回来的错误信息。就是 if (data.Type == 'ErrorObject') 这句话，如果是错误信息，就会引发一个错误的事件，即：services.error.fire(data, textStatus, jqXHR)，

所有监听 services.error 事件的，都是收到这个错误。

    var _ajax = $.ajax;
    $.extend($, {
        ajax: function (options) {
            options.data = options.data || {};
            var result = $.Deferred();
            _ajax(options).done($.proxy(function (data, textStatus, jqXHR) {
                if (data.Type == 'ErrorObject') {
                    if (data.Code == 'Success') {
                        this._result.resolve(data, textStatus, jqXHR);
                        return;
                    }

                    if ($.isFunction(this._result.element)) {
                        data.element = this._result.element();
                    }

                    services.error.fire(data, textStatus, jqXHR);
                    this._result.reject(data, textStatus, jqXHR);

                    return;
                }

                this._result.resolve(data, textStatus, jqXHR);
            }, { _result: result }))
                .fail($.proxy(function (jqXHR, textStatus) {

                    var err = { Code: textStatus, status: jqXHR.status, Message: jqXHR.statusText };
                    if ($.isFunction(this._result.element)) {
                        err['element'] = this._result.element();
                    }

                    services.error.fire(err);
                    this._result.reject(err);
                }, { _result: result }));



            return result;
        }
    });

三、监听并处理错误

找到 ErrorHandler.ts 文件，所有的错误信息，都是在这里处理的。services.error.add 是用来监听错误事件的，可以看得出来，如果是没有登录，就会跳转到登录页面，让用户进行登录，否则就调用 ShowError 函数，来显示错误。

services.error.add(function (error) {
    if (error.Code == 'NotLogin' || error.Code == 'TokenRequired') {
        var return_url = '';
        if (location.hash.length > 1)
            return_url = location.hash.substr(1);

        return app.showPage('User_Login', { redirectUrl: return_url });
    };
    showError(error);
});

 

写得比较简单，有任何疑问都可以给我留言。

 

项目分享八：基于按钮点击事件的弹窗

项目分享七：客户端防止表单重复提交

项目分享六：图片的延迟加载

项目分享五：H5图片压缩与上传 

项目分享四：购物车页面的更新 

项目分享三：页面之间的传值

项目分享二：APP 小红点中数字的处理

项目分享一：在项目中使用 IScroll 所碰到的那些坑