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

时间: 2024-10-13 22:27:39

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

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防止进行一些非法的操作. 2. 如果页面show出来的时间比较长的话, 可以暂时吸引用户的注意力(也就是提高 User Experience). 在Extjs 中, Ext js 的使用方式有多种. 你有可能会发现为什么有的状况下load mask 不出现?  且听下面一一道来... JsonStor

[Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况

前言 关于 Extjs 的 load mask 的使用,可以参考: [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏 一般而言,在如下情况下可能要使用grid 的 reconfigure功能: 1. 改变grid 的显示栏位 (增加或更换, 这和 hide , show 已经有的栏位不同) 2. 切换grid 的View 和 Edit 模式(这里面的内容就比较多了) 这里要讨论的问题是: 在 reconfigure 的时候, grid 是否可以有 load mask 的遮罩

使用spring webflow,在前台页面中如何显示后端返回的错误信息

刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到了一个问题,问题描述如下: 第一次输入错误的用户名密码提示用户名密码错误,第二次输入了正确的用户名和密码仍然报错,校验不通过. 在使用cas之前的登录页面如果输入用户名和密码错误的话,会弹出alert提示框,这个是使用ajax请求实现的.而ajax请求的一般都是那种spring mvc的contro

ASP.NET MVC AJAX调用JsonResult方法并返回自定义错误信息

一.如何用AJAX调用JsonResult方法 比如FuckController中添加有个返回JsonResult类型的方法FuckJson(): public JsonResult FuckJson() { return new JsonResult() { Data = new List<string>() { "fuck", "shit" }, JsonRequestBehavior = JsonRequestBehavior.AllowGet }

VC2010 _com_error 返回的错误信息

1 CString GetComError(const _com_error& e) 2 { 3 CString sMsg; 4 sMsg.Format( 5 _T("HRESULT: 0x%08lx; Error: %s"), 6 e.Error(), 7 e.ErrorMessage() 8 ); 9 10 if(e.ErrorInfo()) 11 { 12 sMsg += TEXT("\nSource: ") + CString((LPCTSTR)e.

ASP.net jQuery调用webservice返回json数据的一些问题

之前寒假时,试着使用jQuery写了几个异步请求demo, 但是那样是使用的webform普通页面,一般应该是用 webservice 居多. 最近写后台管理时,想用异步来实现一些信息的展示和修改, 这是第一次真正的在实际中运用ajax,卡了一个小时才做好简单的信息展示. 在这之间遇到了两个问题.写下来分享给大家,也加深一下自己的印象. 有错误的地方还请大神指出. 前端js代码: 1 <script type="text/javascript"> 2 $(function

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)

一.问题研究的背景和意义 目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一.在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单.TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点.动态生成树有两种思路:一种是一次性生成全部树节点,另一种是逐级加载树节点(利用AJAX,每次点击节点时查询下

ajax返回json时,js获取类型,是字符串类型

ajax向php服务端请求,并返回json串给前端. js发现得到的返回值的类型是字符串,不能直接取json对象属性,需要JSON.parse(). 怎么解决呢? 这需要在php返回json时,加上一个header(),告知js,我这个返回的是Content-Type是json.这样js获取的就是json对象类型了. header('Content-Type: application/json; charset=utf-8'); 当返回的是字符串类型时,有可能Content-Type:text/

Ext.store.load callback

var paramsReceivable = {};                paramsReceivable.querytext = Ext.getCmp('hiddquerytext').getValue();                gridReceivable.store.load({                    params: paramsReceivable,                    callback: function (r, options,