Назначение функции по умолчанию для ошибки Ext.Ajax.request

Question

Я делаю тонну запросов ajax в своем приложении, используя Ext.Ajax.request. Много раз я не хочу или есть время, чтобы положить в любой фантазии обработки ошибок, если запрос не удается, так что я в конечном итоге делает что-то вроде этого:

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

Менее навязчивый способ заключается в установке глобальный обработчик. У него была бы проблема, упомянутая Дрю, каждый звонок был бы затронут. Таким образом, было бы проще изменить существующий код, если вы действительно хотите это поведение для всех вызовов 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 при использовании 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', { 
 
\t extend: 'Ext.app.EventDomain', 
 
\t singleton: true, 
 
\t type: 'extAjax', 
 
\t idProperty: 'myRequest', 
 
\t constructor: function() { 
 
\t \t var me = this; 
 
\t \t me.callParent(); 
 
\t \t me.monitor(Ext.Ajax); 
 
\t } 
 
}); 
 

 
Ext.define('Myapp.controller.Workspace', { 
 
\t extend: 'Ext.app.Controller', 
 

 
\t init: function() { 
 
\t \t var me = this; 
 
\t \t // use this controller to deal with event from Ext.ajax 
 
\t \t me.listen({ 
 
\t \t \t extAjax: { 
 
\t \t \t \t '*': { 
 

 
\t \t \t \t \t requestexception: function(conn, response, options) { 
 
\t \t \t \t \t \t console.log('exception', response.status, response); 
 
\t \t \t \t \t \t if (response.status == 403) { 
 
\t \t \t \t \t \t \t // open a window to ask login 
 
\t \t \t \t \t \t \t popLoginWin(); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
});

Я использую этот способ обработки сеанса истекло, а это, конечно, может иметь дело с другими ситуациями.