Ext JS 5 關於Store load返回json錯誤信息或異常的處理

關於在store load的時候服務器返回錯誤信息或服務器出錯的處理。ExtJS4應該也能用，沒測試過。

這里有兩種情況：

1. 服務器返回錯誤json錯誤信息，狀態為200
2. 服務器異常，狀態為500

一、返回json錯誤信息的處理

在store獲取json數據時，數據結構類似：

 

{
     "users": [{
         "id": 1,
         "name": "Ed",
         "orders": [{
             "id": 10,
             "total": 10.76,
             "status": "invoiced"
        },{
             "id": 11,
             "total": 13.45,
             "status": "shipped"
        }]
     }]
}

 

這是正常的數據。

但是服務器如果判斷用戶沒有登錄或者沒有權限等情況時，我們返回的錯誤信息數據結構應該為：

 

{
    "success": false,
    "error": "There was an error with your request"
}

 

與Ext.Ajax.request用法相似。

但是，在默認情況下，store不會處理success為false時的情況，也不會拋出異常。那怎么辦呢？

我們先來看一下定義Store時的配置項：

 

var store = new Ext.data.Store({
    fields : ['foo'],
    proxy  : {
        type   : 'ajax',
        url    : 'data.json',
        reader : {
            type            : 'json',
            rootProperty    : 'data',
            messageProperty : 'error'
        }
    }});

 

我們需要在Reader中添加配置項messageProperty，在你返回success為false的數據時，此配置項對應的json對象屬性值將會在后面用上，此配置項配置為”error”。

然后我們就可以處理錯誤了，我們再回到Store里，先看看Store的load事件

 

store.on("load", function(store, records, successful, eOpts) {
    if(!successful) {
        var error = eOpts.getError();
    }
});

 

有四個參數：

store, records, successful, eOpts

其中successful就是對應着服務器返回的JSON中的success屬性，當success為false時successful參數也為false。在eOpts的error屬性里我們可以等到reader中messageProperty配置的屬性值。

即error變量的值為：”There was an error with your request”。

 

load里的callback和load事件都是可以的，這里的operation對應着事件中的eOpts參數。

 

store.load({
    callback: function(records, operation, success) {
        if (success) {
            // ...
        } else {
            var error = operation.getError();
 
            Ext.Msg.alert('Error', error);
        }
    }});

 

當然，如果你要根據情況來處理不同的錯誤，你在服務器傳過來的數據error為錯誤代碼或對象，前端再按照不同的error值來處理。

二、服務器異常

例如500錯誤，用法與上述一樣，只是eOpts中的error不為你配置的值，而是一個object，這個對象有三個屬性：

• response：服務器返回的信息
• status：狀態值，如果找不到服務器，為0，服務器內部錯誤，為500
• statusText：錯誤標題

處理方法可以根據status處理，response.responseText為服務器返回的文本。

本文只提供方法，細節可console.dir(eOpts)輸出查看。

完整代碼如下，其他的store繼承此類即可：

 

JavaScript

Ext.define("HandPlm.ux.store.Base", {
    extend: "Ext.data.Store",
    constructor: function () {
        var me = this;
        me.callParent(arguments);
 
        me.on("load", function (store, records, successful, eOpts) {
            if (successful === false) {
                var error = eOpts.getError();
                if (typeof error === "string") {
                    Ext.Msg.alert("錯誤", eOpts.getError());
                }
                if (typeof error === "object") {
                    switch (error.status) {
                        case 0:
                            Ext.Msg.alert("錯誤", "找不到服務器");
                            break;
                        case 500:
                            Ext.Msg.alert("服務器內部錯誤", error.response.responseText);
                            break;
                        default:
                            console.error(error);
                    }
                }
            }
        });
    }
});

 

不要忘記配置Reader中的messageProperty