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

標籤：事件   nim   .ajax   order   判斷   查看   else   tran   先來   

關於在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

 

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