Установить таймаут для ajax (jQuery)

Question

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

Иногда success функция работает хорошо, иногда нет.

Как установить время ожидания для этого запроса AJAX? Например, 3 секунды, если время истекло, то показать ошибку.

Проблема в том, что ajax-запрос останавливает блок до его завершения. Если сервер не работает некоторое время, он никогда не закончится.

Answer 1

Пожалуйста, прочитайте $.ajax документацию , это покрытая тема.

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

Вы можете увидеть, какой тип ошибки был вызван, открыв параметр textStatus опции error: function(jqXHR, textStatus, errorThrown). Возможные варианты: «Тайм-аут», «Ошибка», «Прервать» и «Parsererror».

Answer 2

Вот несколько примеров, которые демонстрируют установку и обнаружение тайм-аутов в старой и новой парадигмах jQuery.

Демо-версия

Обещание с 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 </strong>

$.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
});

Обратите внимание, что параметр textStatus (или jqXHR.statusText ) сообщит вам об ошибке. Это может быть полезно, если вы хотите знать, что сбой был вызван тайм-аутом.

ошибка (jqXHR, textStatus, errorThrown)

Функция, вызываемая, если запрос не выполнен Функция получает три аргумента: JQXHR (в jQuery 1.4.x, XMLHttpRequest), строка, описывающая тип произошла ошибка и необязательный объект исключения, если таковой возник. Возможные значения для второго аргумента (кроме нуля): «время ожидания», «error», «abort» и «parsererror». Когда происходит ошибка HTTP, errorThrown получает текстовую часть статуса HTTP, такую ​​как «Не найдено» или «Внутренняя ошибка сервера». Начиная с jQuery 1.5 ошибка Установка может принимать массив функций. Каждая функция будет вызвана в очереди. Примечание. Этот обработчик не вызывается для междоменного сценария и Запросы JSONP.

Источник: http://api.jquery.com/jQuery.ajax/

Answer 3

Вы можете использовать настройку timeout в параметрах ajax, например так:

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

Узнайте все о параметрах ajax здесь: http://api.jquery.com/jQuery.ajax/

Помните, что когда происходит тайм-аутобработчик error запущен, а не обработчик success:)

Answer 4

использовать полнофункциональную функцию .ajax jQuery. сравните с https://stackoverflow.com/a/3543713/1689451 для примера.

без тестирования, просто слияние вашего кода со ссылочным SO вопросом:

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);
        }
    }
});​