Cancelando peticiones del objeto $.ajax de jQuery

Ajax Flow
Ajax Flow

Cuando desarrollamos aplicaciones web, en algunos casos es necesario cancelar las peticiones hechas vía ajax, simplemente para que no se acumulen llamados al servidor..

En este ejemplo, enviaré una petición a una url cualquiera que inmediatamente cancelaré, para ejemplificar.

var xhr = null;
 
// Enviar petición
xhr = $.ajax({
    type: 'POST',
    url: 'http://url',
    data: {
      'nombre':'jack',
      'origen':'nicaragua'
    },
    success:function(msg) {
       console.log(msg);
    }
});
 
// Cancelar petición
xhr.abort()

Yo utilizo una variable global especial (xhr por mi buena imaginación) dentro de un objeto global.. y lo que me gusta hacer es preguntar si la petición fue respondida.. en caso de que aun siga pendiente y esté a punto de hacer una nueva, cancelo la primer petición e inicio una nueva.

if(xhr && xhr.readyState != 4) { 
    xhr.abort();
}
 
xhr = $.ajax({
    type: 'POST',
    url: 'http://url',
    data: {
      'nombre':'jack',
      'origen':'nicaragua'
    },
    success:function(msg) {
       console.log(msg);
    }
});

Ahora en caso de querer cancelar cualquier petición (para aplicaciones muy grandes), lo que se hace es almacenar los objetos xhr en un arreglo y luego recorrerlo para finalizar todas las conexiones.. entonces,

(function($) {
    var xhrRequests = [];
 
    // Cada vez que se hace una peticion, la agregamos al arreglo
    $(document).ajaxSend(function(e, jqXHR, options) {
        xhrRequests.push(jqXHR);
    });
 
    // Y al completarse la peticion la eliminamos del arreglo, de lo contrario se quedara para ser cancelada
    $(document).ajaxComplete(function(e, jqXHR, options) {
        xhrRequests = $.grep(xhrRequests, function(x) {
            return x != jqXHR;
        });
    });
 
    // Recorrer cada peticion y cancelarla
    var abandonarTodasLasPeticiones = function() {
        $.each(xhrRequests, function(idx, jqXHR) {
            jqXHR.abort();
        });
    };
})(jQuery);

De tal manera que solamente haciendo abandonarTodasLasPeticiones(); se cancelaran todas las peticiones hechas con anterioridad, espero que esto les ayude a comprender y que hacer con sus peticiones..

#HappyCoding

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..

Twitter LinkedIn Flickr YouTube 

5 thoughts on “Cancelando peticiones del objeto $.ajax de jQuery

  1. Muchas gracias!!! Está genial explicado. Pero dando una vuelta de tuerca… ¿cómo podría cancelar todas las peticiones menos una específica? ¿y al revés, cancelar una en concreto y dejar el resto?

    Muchas gracias de nuevo, fue de gran ayuda 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *