requested - Envuelva el método $.ajax() de jQuery para definir el manejo global de errores

mostrar error ajax jquery

Question

Como parte de preguntas como esta , busco envolver el método $ .ajax () de jQuery de manera que pueda proporcionar el manejo de errores en una ubicación, que luego se utilizaría automáticamente en todas las llamadas remotas de una aplicación.

El enfoque simple sería simplemente crear un nuevo nombre, similar a cómo $ .get () y $ .post () implementan fachadas a $ .ajax (). Sin embargo, espero reutilizar el nombre $ .ajax (), de modo que podamos mantener el resto de nuestro código usando la sintaxis jQuery estándar, ocultando el hecho de que hemos agregado nuestro propio manejo de errores. ¿Es esto práctico y / o bueno de lograr, o posiblemente una idea horrible?

EDITAR: Las respuestas hasta ahora indican que .ajaxError () es el camino a seguir. Sé que esto detectará errores de nivel 400 y 500, pero ¿hay alguna forma (con este controlador de eventos o de otro tipo) para capturar 302 redirecciones también? Estoy tratando de manejar las respuestas que están redirigiendo a una página de inicio de sesión, pero queremos interceptar esa redirección cuando se trata de una solicitud XHR, permitiendo que el usuario cancele la acción en lugar de forzarla a reenviarse automáticamente.

Answer 1

Creo que es una mala idea. Creo que envolver $.ajax está bien, pero estás hablando de redefinirlo . Cualquiera que no se dé cuenta de esto obtendrá resultados inesperados.

Como han mencionado otros, enlazar un controlador con $.ajaxError es el camino a seguir.

Answer 2

En realidad, jQuery proporciona el gancho, $.ajaxError solo para este propósito. Se $ajaxError() todos los controladores que haya enlazado con $ajaxError() cuando una solicitud de ajax desde la página se complete con un error. Especificar un selector le permite hacer referencia a this dentro de su controlador .ajaxError() .

Para usarlo para manejar todos los errores de solicitud de ajax en la página y usar this para apuntar al document , podría hacer algo como esto:

$(document).ajaxError(function(event, request, settings){
   alert("Error requesting page: " + settings.url);
});

Answer 3

jQuery tiene un método práctico llamado $ .ajaxSetup () que le permite establecer opciones que se aplican a todas las solicitudes AJAX basadas en jQuery que vienen después. Al colocar este método en su función de documento principal listo, todas las configuraciones se aplicarán al resto de sus funciones automáticamente y en una ubicación

$(function () {
    //setup ajax error handling
    $.ajaxSetup({
        error: function (x, status, error) {
            if (x.status == 403) {
                alert("Sorry, your session has expired. Please login again to continue");
                window.location.href ="/Account/Login";
            }
            else {
                alert("An error occurred: " + status + "nError: " + error);
            }
        }
    });
});

Referencia: https://cypressnorth.com/programming/global-ajax-error-handling-with-jquery/

Answer 4

Es posible que desee mirar $.ajaxError .

$(document).ajaxError(function myErrorHandler(event, xhr, ajaxOptions, thrownError) {
  alert("There was an ajax error!");
});

jQuery proporciona un montón de otras formas de adjuntar controladores globales .

Para responder a su edición, puede capturar solicitudes de ajax exitosas con $.ajaxSuccess , y puede capturar todas (exitosas y fallidas) con $.ajaxComplete . Puede obtener el código de respuesta del parámetro xhr , como

$(document).ajaxComplete(function myErrorHandler(event, xhr, ajaxOptions, thrownError) {
  alert("Ajax request completed with response code " + xhr.status);
});