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

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 来完成此操作，或者在使用 [=16= 时从 Ext.ajax 创建您自己的 ajax class 和 extend ].从那里你可以实现一些不错的错误处理 and/or 日志记录。

在 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 失败

Assigning a default function to an Ext.Ajax.request failure

javascript

ajax

extjs

extjs5