項目分享九：客戶端的異常處理

時間 2019-11-06

原文原文鏈接

1、異常的處理html

異常處理，是全部程序都應該有的功能，尤爲是網絡異常，在 APP 更是常見。咱們來看看 ChiTu Store 是如何處理異常。異常主要分兩種狀況：git

一、服務端引起的異常，也就是服務端返回來的錯誤信息，當服務端異常後，返回的錯誤JSON信息爲：github

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

二、客戶端出現的異常，客戶端出現的異常，絕大數爲網絡異常，ChiTu Store 主要處理這類的異常。ajax

咱們如今要看一下 ChiTu Store 是如何處理的。網絡

2、重寫 Ajax 函數

經過重寫 ajax 函數，來捕獲服務端返回來的錯誤信息。就是 if (data.Type == 'ErrorObject') 這句話，若是是錯誤信息，就會引起一個錯誤的事件，即：services.error.fire(data, textStatus, jqXHR)，app

全部監聽 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;
        }
    });

3、監聽並處理錯誤

找到 ErrorHandler.ts 文件，全部的錯誤信息，都是在這裏處理的。services.error.add 是用來監聽錯誤事件的，能夠看得出來，若是是沒有登陸，就會跳轉到登陸頁面，讓用戶進行登陸，不然就調用 ShowError 函數，來顯示錯誤。post

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);
});

寫得比較簡單，有任何疑問均可以給我留言。ui

項目分享八：基於按鈕點擊事件的彈窗this

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