Как разрывать запросы на JS?

228
20 декабря 2017, 23:38

Всем добрый день.

Есть задача при которой я совершаю несколько GET запросов для получения JSON при определенном действии:

  1. Получение из JSON базовой информации
  2. Получение вторичной информации

Однако, если я делаю это действие быстро например два раза, то второй запрос начинает выполняться вместе с тем первым, который еще не успел выполниться.

Как на чистом js или на JQuery сделать сброс всех GET запросов при определенном действии, например нажатие на клавишу?

Answer 1

Если вы хотите, чтобы при выполнении двух Ajax запросов идущих подряд, второй запрос не начинал выполнение, пока не выполнится первый, просто в параметрах первого запроса укажите: async: false

async (default: true) (Type: Boolean) - По умолчанию все запросы отправляются асинхронно (т.е. по умолчанию это значение равно true). Если вам нужны синхронные запросы, установите для этого параметра значение false. Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, пока запрос активен. jQuery.ajax()

Как одно из решений async: false - имеет место быть, но не рекомендуется этого делать по причине подвисания браузера. Смысл Ajax как раз в том, чтобы выполнение было асинхронным, без перезагрузки страницы ну и удобство с быстротой выполнения (AJAX - Asynchronous Javascript and XML). Лучше выполнять так называемые callback, чем синхронный запрос.

Можно поместить один запрос внутрь другого. К примеру вам нужно, чтобы второй запрос выполнился в случае успешного завершения первого запроса, тогда поместив внутрь success - функции первого запроса второй запрос, вы выполните второй запрос в случае успешного выполнения первого, тогда async: false не будет нужен. Вот как пример:

$.ajax({
    type: "POST",
    url: "someurl",
    data: 'somedata',
    success: function (data) {
        var a = data; // результат возвращенный с результате первого запроса
        $.ajax({ // второй запрос
            type: "post",
            url: "someurl",
            data: 'somedata' + a, // просто как пример
            success: function (data) {
                // тут можем еще что-то делать
            }
        });
    }
});

Ссылка на источник: jQuery Ajax Request inside Ajax Request

Касаемо остановки запроса - это тоже возможно, просто нужно сохранить результат Ajax запроса в переменную, а затем вызвать метод abort() у этой переменной, как вам уже дали ссылку. Вот пример оттуда:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});
// Затем вы можете прервать запрос
request.abort();

Ссылка на источник: Stop all active ajax requests in jQuery

READ ALSO
Оптимизировать вывод ToolTip в компонентах PrimeNG

Оптимизировать вывод ToolTip в компонентах PrimeNG

Делаю небольшой проект на Angular 4 + PrimeNGВ шаблоне одного из компонентов используем компонент ToolTip

236