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