Question

我使用Ext.Ajax.request在我的应用程序中发出了大量的ajax请求。很多时候，如果请求失败，我不想或没有时间处理任何花哨的错误处理，所以我最终做了这样的事情：

    Ext.Ajax.request({
        url: 'requesturl',
        success: function (response) {
            //request successful. do stuff with response
        },
        failure: function () {
            Ext.Msg.alert('Unknown Error', 'Please alert an administrator.');
        }

我想知道是否有一种方法可以定义默认的Ajax请求失败函数，因此我不必在我写的每个Ajax请求中包含失败参数。

Answer 1

您可以在Ext.Ajax上创建自己的自定义方法，该方法具有默认的失败处理程序。在这个例子中，为了简单起见，我只是模拟了Ext对象。

//Placeholder for the actual Ext object for the purposes of demonstration
var Ext = {
  Ajax: {
    request: function (r) {
      //Simulate a failure
      r.failure();
    }
  },
  Msg: {
    alert: function (title, message) {
      var el = document.createElement('div');
      
      el.innerHTML = title + ' - ' + message;
      document.body.appendChild(el);
    }
  }
}

//Add a custom method to Ext.Ajax
Ext.Ajax.requestWithDefaultFailure = function (r) {
  r.failure || (r.failure = function () {
    Ext.Msg.alert('Unknown Error', 'Please alert an administrator.');
  });
  
  Ext.Ajax.request(r);
};

//Now make your calls with the new method
Ext.Ajax.requestWithDefaultFailure({
  url: 'requesturl',
  success: function (response) {
    //request successful. do stuff with response
  }
});

Ext.Ajax.requestWithDefaultFailure({
  url: 'anotherUrl',
  success: function (response) {
    //request successful. do stuff with response
  },
  failure: function () {
    Ext.Msg.alert('Error', 'I specified a failure handler, so make sure to use that one instead of the default.')
  }
});

或者，如果您想保持Ext不变，您可以为辅助方法定义自己的模块并使用它：

var ExtHelpers = {  
  ajaxRequestWithDefaultFailure: function (r) {
    r.failure || (r.failure = function () {
      Ext.Msg.alert('Unknown Error', 'Please alert an administrator.');
    });

    Ext.Ajax.request(r);
  };
};

Answer 2

一种不太干扰的方法是安装全局处理程序。它会有Drew提到的问题，每次通话都会受到影响。因此，如果您真的想要所有Ext.Ajax.request调用的行为，那么更改现有代码会更简单。 http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Connection-event-beforerequest

Ext.Ajax.on('beforerequest', function( conn, options, eOpts ) {
    if (!options.failure) {
        options.failure = function() {...} 
    }
});

Answer 3

您可以创建override来完成此操作，或者在使用extend时从Ext.ajax创建您自己的ajax类和MVC。从那里你可以实现一些不错的错误处理和/或记录。

在ExtJs 4中

Ext.define('Ext.overrides.Ajax', {
    override : 'Ext.data.Connection',
    listeners : {
        requestexception : function(response) {
            var error = response.status + ' - ' + response.statusText;
            // if response status is 202 (Accepted), should
            // have warning message
            if (response.status == 202) {
                Ext.Msg.show({
                    title : 'REST Warning message',
                    msg : 'Ajax Request Exception! ' + error,
                    cls : 'msg-wrap',
                    buttons : Ext.Msg.OK,
                    icon : Ext.Msg.WARNING
                });
            }

            if (response.status > 400) {
                var errorData = Ext.JSON.decode(response.responseText);

                Ext.Msg.show({
                    title : 'REST Error message',
                    msg : 'Ajax Request Exception! ' + errorData,
                    cls : 'msg-wrap',
                    buttons : Ext.Msg.OK,
                    icon : Ext.Msg.ERROR
                });
            }
        }
    }
});

在ExtJs 5中

Ext.define('Ext.override.AjaxOverride', {
    override: 'Ext.Ajax'
    // omitted overridden properties...

}, function() {
    var me = this;

    me.setExtraParams({
        foo: "bar" 
    });

    me.setUrl('MyUrl');
    me.setTimeout(600000);

    me.on({
        scope: me,
        requestexception : function(response) {
            var error = response.status + ' - ' + response.statusText;
            // if response status is 202 (Accepted), should
            // have warning message
            if (response.status == 202) {
                Ext.Msg.show({
                    title : 'REST Warning message',
                    msg : 'Ajax Request Exception! ' + error,
                    cls : 'msg-wrap',
                    buttons : Ext.Msg.OK,
                    icon : Ext.Msg.WARNING
                });
            }

            if (response.status > 400) {
                var errorData = Ext.JSON.decode(response.responseText);

                Ext.Msg.show({
                    title : 'REST Error message',
                    msg : 'Ajax Request Exception! ' + errorData,
                    cls : 'msg-wrap',
                    buttons : Ext.Msg.OK,
                    icon : Ext.Msg.ERROR
                });
            }
        }
    });
});

或者从Ext.ajax扩展（甚至更好）这样的事情

Ext.define('APP.ux.Ajax', {
    extend: 'Ext.data.Connection',

    requires: [
        'APP.ux.Msg'
    ],

    singleton : true,
    autoAbort : false,

    request: function(config) {
        var cfg = config;

        Ext.apply(cfg, {
            success: function(form, action) {
                APP.ux.Msg.alert('Success', action.result.msg);
                //TODO: Add more logic here
            },
            failure: function(form, action) {
                switch (action.failureType) {
                    case Ext.form.action.Action.CLIENT_INVALID:
                        APP.ux.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                        break;
                    case Ext.form.action.Action.CONNECT_FAILURE:
                        APP.ux.Msg.alert('Failure', 'Ajax communication failed');
                        break;
                    case Ext.form.action.Action.SERVER_INVALID:
                        APP.ux.Msg.alert('Failure', action.result.msg);
                        break;
                }
            }
        });
        this.callParent(cfg);
    }
});

Answer 4

所有道路都通往罗马。但我认为最优雅的方式是使用“Ext.app.EventDomain”。

// connect Ext.Ajax enent to Bus
Ext.define('MyApp.domain.Ajax', {
	extend: 'Ext.app.EventDomain',
	singleton: true,
	type: 'extAjax',
	idProperty: 'myRequest',
	constructor: function() {
		var me = this;
		me.callParent();
		me.monitor(Ext.Ajax);
	}
});

Ext.define('Myapp.controller.Workspace', {
	extend: 'Ext.app.Controller',

	init: function() {
		var me = this;
		// use this controller to deal with event from Ext.ajax
		me.listen({
			extAjax: {
				'*': {

					requestexception: function(conn, response, options) {
						console.log('exception', response.status, response);
						if (response.status == 403) {
							// open a window to ask login
							popLoginWin();
						}
					}
				}
			}
		});
	}
});

我使用这种方式处理Session过期，而它肯定可以处理其他情况。

为Ext.Ajax.request失败分配默认函数

4 个答案: