首页 > 代码库 > Ext JS 5 关于Store load返回json错误信息或异常的处理

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

 

Ext JS 5 关于Store load返回json错误信息或异常的处理