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

一、异常的处理

异常处理，是所有程序都应该有的功能，尤其是网络异常，在 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);
});