关于在store load的时候服务器返回错误信息或服务器出错的处理。ExtJS4应该也能用,没测试过。
这里有两种情况:
- 服务器返回错误json错误信息,状态为200
- 服务器异常,状态为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