javascript - success - Establecer tiempo de espera para ajax(jQuery)

peticion ajax javascript

Question

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

A veces la función de success funciona bien, a veces no.

¿Cómo configuro el tiempo de espera para esta solicitud de Ajax? En el ejemplo, 3 segundos, si se acaba el tiempo, entonces muestra un error.

El problema es que la solicitud ajax congela el bloque hasta que finaliza. Si el servidor está inactivo por un tiempo, nunca terminará.

Answer 1

Aquí hay algunos ejemplos que demuestran la configuración y detección de tiempos de espera en los paradigmas antiguos y nuevos de jQuery.

Demo en vivo

Promesa con jQuery 1.8+

Promise.resolve(
  $.ajax({
    url: ''/getData'',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == ''timeout'')
  {     
    alert(''Native Promise: Failed from timeout''); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: ''/getData'',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === ''timeout'')
    {     
        alert(''Failed from timeout''); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: ''/getData'',
    error: function(jqXHR, textStatus){
        if(textStatus === ''timeout'')
        {     
             alert(''Failed from timeout'');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

Tenga en cuenta que textStatus param (o jqXHR.statusText ) le permitirá saber cuál fue el error. Esto puede ser útil si desea saber que la falla fue causada por un tiempo de espera excedido.

error (jqXHR, textStatus, errorThrown)

Una función a llamar si la solicitud falla. La función recibe tres argumentos: el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest), una cadena que describe el tipo de error que ocurrió y un objeto de excepción opcional, si se produjo uno. Los valores posibles para el segundo argumento (además de nulo) son "tiempo de espera", "error", "abortar" y "parsererror". Cuando se produce un error HTTP, errorThrown recibe la parte textual del estado HTTP, como "No encontrado" o "Error interno del servidor". A partir de jQuery 1.5, la configuración de error puede aceptar una matriz de funciones. Cada función se llamará a su vez. Nota: Este controlador no se llama para secuencias de comandos entre dominios y solicitudes JSONP.

src: documentation

Answer 2

Lea la documentation $.ajax , este es un tema cubierto.

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

Puede ver qué tipo de error se produjo accediendo al parámetro textStatus de la error: function(jqXHR, textStatus, errorThrown) . Las opciones son "tiempo de espera", "error", "abortar" y "parsererror".

Answer 3

Podría usar la configuración de timeout en las opciones de Ajax como esta:

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Lea todo sobre las opciones de Ajax aquí: documentation

Recuerde que cuando se produce un tiempo de espera, se activa el controlador de error y no el controlador de success :)

Answer 4

utiliza la función .ajax jQuery con todas las funciones. compárelo con https://.com/a/3543713/1689451 para ver un ejemplo.

sin pruebas, simplemente fusionando su código con la pregunta SO mencionada:

target = $(this).attr(''data-target'');

$.ajax({
    url: $(this).attr(''href''),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​