ejemplos - jQuery ajax manejo de errores genérico y caso por caso

jquery cdn

Question

Tengo un controlador de error ajax genérico escrito así:

$(''html'').ajaxError(function(e, xhr, settings, exception) {

    var message = '''';

    if (xhr.status == 0) {
        message = ''You are offline!/n Please check your network.'';
    }
    else if (xhr.status == 403) {
        window.location.href = $(''#logon'').attr(''href'');
    }
    else if (xhr.status == 404) {
        message = ''Requested URL not found.'';
    }
    else if (xhr.status == 500) {

        message = xhr.responseText;

        $(''#cboxLoadedContent div.news_article_content'').append(''<p>'' + message + ''</p>'');

        try {//Error handling for POST calls
            message = JSON.parse(xhr.responseText);
        }

        catch (ex) {//Error handling for GET calls
            message = xhr.responseText;
        }

    }
    else if (errStatus == ''parsererror'') {
        message = ''Error./nParsing JSON Request failed.'';

    }
    else if (errStatus == ''timeout'') {
        message = ''Request timed out./nPlease try later'';
    }
    else {
        message = (''Unknown Error./n'' + xhr.responseText);
    }

    if (message != '''' && xhr.status != 500) {
        message = message;
    }

    if (xhr.status != 403) {

        $(''#icis_dashboard'').append(''<p id="ajax_error_msg" class="offScreen">'' + message + ''</p>'');

        errorBox({
            inline: true,
            width: 0,
            href: ''#ajax_error_msg'',
            onLoadCall: function() { $(''#cboxLoadedContent'').jScrollPaneRemove(); },
            onCleanupCall: function() { $(''#ajax_error_msg'').remove(); }
        });
    }

});

Entonces, cuando el error no es 403, se muestra un diálogo con el texto relacionado con el error.

Esto está bien, pero lo que me gustaría hacer es tener el controlador genérico como una copia de seguridad y luego lidiar con cada error de forma individual dentro de la llamada ajax original.

así como el controlador de copia de seguridad alerta "barra" en un 404, me gustaría alertar a "foo" en su lugar:

            error: function(xhr) {
            if (xhr.status == 404) {
                //window.location.href = $(''#logon'').attr(''href'');
                alert("foo");    
            }
        }

De todas formas me quedo para hacer esto? No sé cómo evitar que la copia de seguridad se active, ya que ambos parecen activarse en este momento.

Answer 1

Creo que establecer una variable global es una mala idea porque puede tener varias solicitudes ajax al mismo tiempo. Como se mencionó, la devolución de llamada de error "local" se llama antes de la devolución de llamada global. Mi solución es simplemente adjuntar alguna propiedad personalizada al objeto jqXHR, por ejemplo, manipularlo Localmente, establecerlo en su controlador local y verificarlo en el controlador global.

manejo local:

$.ajax({
   //some settings
   error:function(jqXHR, textStatus, errorThrown){
      //handle and after set
      jqXHR.handledLocally = true

   }
})

manejo global:

$(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
    if (jqXHR.handledLocally)) {
        return;
    }
    //handle global error
})

Answer 2

Definir el controlador de errores global como función

function ajaxError() {
  var message = '''';

  if (xhr.status == 0) {
    message = ''You are offline!/n Please check your network.'';
  }
  .....
}

Y crear envoltura jQuery.ajax:

function doAjax(url, fnError) {
  jQuery.ajax(url, {
    error: fnError || defaultErrorHandler 
  })
}

Ahora use este contenedor en lugar de jQuery.ajax predeterminado:

doAjax(''/someResource''); // defaultErrorHandler using for handle error
doAjax(''/someResource'', function() {...}); // custom error function using

Answer 3

En realidad resolvimos esto con lo siguiente:

function ajaxError(xhr, textStatus, errorThrown) {

    var message = '''';

    if (xhr.status == 0) {
        message = ''You are offline!/n Please check your network.'';
    }
    else if (xhr.status == 403) {
        window.location.href = $(''#logon'').attr(''href'');
    }
    else if (xhr.status == 404) {
        message = ''Requested URL not found.'';
    }
    else if (xhr.status == 500) {

        message = xhr.responseText;

        $(''#cboxLoadedContent div.news_article_content'').append(''<p>'' + message + ''</p>'');

        try {//Error handling for POST calls
            message = JSON.parse(xhr.responseText);
        }

        catch (ex) {//Error handling for GET calls
            message = xhr.responseText;
        }

    }
    else if (errStatus == ''parsererror'') {
        message = ''Error./nParsing JSON Request failed.'';

    }
    else if (errStatus == ''timeout'') {
        message = ''Request timed out./nPlease try later'';
    }
    else {
        message = (''Unknown Error./n'' + xhr.responseText);
    }

    if (message != '''' && xhr.status != 500) {
        message = message;
    }

    if (xhr.status != 403) {

        $(''#icis_dashboard'').append(''<p id="ajax_error_msg" class="offScreen">'' + message + ''</p>'');

        errorBox({
            inline: true,
            width: 0,
            href: ''#ajax_error_msg'',
            onLoadCall: function() { $(''#cboxLoadedContent'').jScrollPaneRemove(); },
            onCleanupCall: function() { $(''#ajax_error_msg'').remove(); }
        });
    } 
};

Por lo tanto, cada llamada AJAX ahora hará referencia a la función de una de estas dos maneras:

1) Si queremos que el valor por defecto suceda.

error: ajaxError

2) si queremos apuntar a una situación específica, si eso no se detecta, continúe con el valor predeterminado

    error: function(xhr) {

        if (xhr.status == 404) {
            alert("local");
        }
        else {
            // revert to default
            ajaxError.apply(this, arguments);
        }
    }

Answer 4

Es una pregunta antigua, pero esto puede ser útil para alguien. El problema con esta respuesta es que es posible que tenga código en los controladores globales que necesita ejecutar. Encontré esta otra respuesta más útil, pero no es una buena práctica usar variables globales. También es posible que tenga más de una llamada ajax al mismo tiempo y no funcionará. Propongo esta alternativa ligeramente diferente:

$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
    // Global validation like this one:
    if (jqxhr.status == 401) { window.location = "/login"; }

    if (!settings.handErrorLocally) {
        // Unhandled error.
        alert("Ooops... we have no idea what just happened");
    }
});

Y luego, cuando llame a cualquier ajax, puede manejar el error usted mismo:

$.ajax({
    url: "/somePage/",
    handErrorLocally: true
}).done(function () {
    alert("good");
}).fail(function () {
    alert("fail");
});

O deje que el controlador global se encargue de:

$.ajax({
    url: "/somePage/"
}).done(function () {
    alert("good");
});

Answer 5

Estoy agregando a la respuesta de Tim Banks que fue extremadamente útil. Solo quiero cambiar el hecho de que utiliza una variable global y una configuración en la llamada ajax. Lo he hecho por defecto para retroceder, pero esto podría cambiarse fácilmente.

$(''html'').ajaxError(function(e, xhr, settings, exception) {
    if (xhr.status == 404) {
        alert("html error callback");    
    }
});

$.ajax({
    url: "missing.html",
    global: true
});

He editado mi respuesta para usar la configuración global que decide si propagarse al controlador de eventos global

Answer 6

No creo que puedas controlar esto con jQuery. El ajaxError global se llama en cualquier error que ocurra durante una llamada ajax. Sin embargo, la devolución de llamada de error "local" se llama antes de la devolución de llamada global, por lo que podría establecer una variable que le indique a la devolución de llamada global que no se ejecute.

Por ejemplo:

var handledLocally = false;

$(''html'').ajaxError(function(e, xhr, settings, exception) {
    if (!handledLocally){
        //run the normal error callback code and the reset handledLocally
    }
});

error: function(){
    //set handledLocally to true to let the global callback it has been taken care of
    handledLocally = true;
}

Puede ver este jsFiddle que muestra cómo se puede lograr esto (asegúrese de hacer clic en ejecutar en la parte superior antes de hacer clic en los enlaces): http://jsfiddle.net/e7By8/

Answer 7

Puede configurar la propiedad ajax "global" en falso en la función ajax que realiza su propio manejo de errores. Eso debería evitar el manejo global de errores. Consulte: http://api.jquery.com/jQuery.ajax#toptions .