為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來完成此任務，或者創建您自己的ajax類並在使用MVC時從Ext.ajax extend 。 從那里你可以實現一些體面的錯誤處理和/或日志記錄。

在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過期，而它肯定可以處理其他情況。