專案分享九：客戶端的異常處理

麥舒發表於2015-12-27
客戶端

一、異常的處理

異常處理，是所有程式都應該有的功能，尤其是網路異常，在 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 所碰到的那些坑

 

相關文章