Как управлять ajax запросами?

Question

[Александр]

Здравствуйте, уважаемые программисты!
У меня на сайте просмотр гиф изображений реализуется кнопкой воспроизведения/остановки.
Т.е, изначально пользователю отображается статический кадр (сохраненный за ранее). Он нажимает кнопку воспроизведения. К серверу отправляется ajax запрос на скачивание файла, а пользователь видит прогресс-бар. В случае успешной загрузки подменяется статичный кадр на гифку. Потом можно остановить ее и снова появится статичный кадр. Если пользователь во время загрузки передумал, загружать, то просто нажимает повторно и процесс убивается
ajaxCall.abort();
Все бы ничего, но на странице может быть много гифок и если пользователь "поставит на загрузку" несколько, сразу то к первому он уже не сможет обратиться, чтобы остановить.
Вот собственно и вопрос, а могу ли я как-то сохранять информацию о всех запущенных запросах и отменять именно тот, на котором нажали кнопку отмены?

Answer 1

[Вадим]

https://learn.javascript.ru/fetch-abort

Comments

[Александр]

Спасибо. Посмотрел. Пока не очень могу понять как там убить конкретный запрос. И откуда контроллер знает о всех возможных запросах и как обращаться к конкретному из них

[Вадим]

Александр, При клике "загрузить " создавайте новый контроллер, делайте запрос, в signal которого будет указать конкретный контроллер(который только что создали), а при отмене загрузки пользователем - делайте аборт контроллером, который создали при загрузке. Тогда он отменит соответствующий запрос.

[Александр]

Видимо структуру я до конца не понимаю. Контроллер создам. Но, пользователь ставит на загрузку 3 гифки и что? Три раза создаётся контроллер с одним и тем же именем? И как тогда отменить загрузку одной из трех гифок, к примеру?

[Вадим]

Александр, ну тут уже Вам решать как запомнить за какой "гифкой" какой контроллер.
Я, как минимум, не вижу ни структуры ни подхода к обработке событий.
Но основных вариантов, как мне видится, 3:
1) Для каждой гифки будет свой объект, в котором хранится контроллер, и методы для отправки\отмены запроса. Соответственно, кнопки "загрузить" и "отменить" дёргают соответствующие методы.
2) Можно сохранять контроллер в кастомное свойство конкртеного html элемента. А в обработчике проверять\использовать это свойство.
3) Можно сделать объект Map, в котором свойством будут выступать, скажем, гифки(их адреса или конкретные html элементы), а значения - их контроллер. И тогда в обработчиках "Загрузить"\ "отменить" смотреть в этот Map и работать с контроллерами.

[Александр]

Вадим, Сейчас у меня как-то так:

var ajaxCall;
 jQuery(document).ready(function(){
$("#body").on('click', '.imgPre', function(event) {
// Получим объект, по событию click
$this = $(this);
// Прочитаем ссылку из data-link
var dataSrc = $this.attr('data-link');
// Прочитаем идентификатор из data-id
var id = $this.attr('data-id');
console.log('Получили идентификатор гифки '+id);
// Прочитаем ссылку из src тега img
var linkSrc = $('#gifIMG'+id).attr('src');
// Получим текущее состояние анимации off - висит заглушка, on - гиф воспроизводится, load - гиф загружается
var dataPlay = $this.attr('data-play');

// Если отображается предпросмотр
if(dataPlay == 'off'){
console.log('Нажали на просмотр гифки');
// Отработаем ajax запрос

ajaxCall = $.ajax({
 // устанавливаем параметры запроса
 url: dataSrc,
 processData: false,
 contentType: false,
 beforeSend: function(p)
	{console.log('Перед отправкой запроса, прячем кнопку запуска');
               $('#play'+id).hide('slow'); // Прячем кнопку запуска
               $this.attr('data-play','load'); // Изменим статус на "загружается"
               console.log('Ставим статус "загружается" ');
    	       $('#progress'+id).show('slow'); // покажем прогресс бар
               },
               success: function(p) {
               	// Установим ссылку на статическую картинку для этапа отключения анимации
                 $this.attr('data-link',linkSrc);
                 // Прячем прогресс бар
                 $('#progress'+id).hide('slow');
                 // Запустим анимацию файла
                 $('#gifIMG'+id).attr('src',dataSrc);
                 $this.attr('data-play','on'); // Изменим статус на "загружено/воспроизводится"
                 console.log('Ставим статус "загружено/воспроизводится" ');
               },
    xhr: function(){
    	    console.log('Обработка ajax-запроса - xhr');
            xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
            console.log('Получили объект xhr');
            xhr.onprogress = function(e) { // добавляем обработчик события progress (onprogress)
               if(e.lengthComputable) { // если известно количество байт
                 // высчитываем процент загруженного
                 var percentComplete = Math.ceil(e.loaded / e.total * 100);
                 // Выводим процент на экран
                 //$('#body_gif'+id).css('width', percentComplete + '%');
                 //$('#text_gif'+id).text(percentComplete + '%');
                 $('#progressBody'+id).html(percentComplete+ '%');
               }
            }

             return xhr;

           }
    });


}

// Если статус "загружается" - значит нажали отмену загрузки
if(dataPlay == 'load'){
console.log('Статус загружается. Убиваем процесс загрузки', ajaxCall);
ajaxCall.abort();$('#progress'+id).hide('slow'); // Отменим запрос и скроем прогресс бар
$this.attr('data-play','off'); // Изменим статус на "предпросмотр"
// Покажем кнопку запуска
$('#play'+id).show('slow');
$('#circle'+id).html('');
}
// Если статус "загружено/воспроизводится" - значит нажали остановку воспроизведения
if(dataPlay == 'on'){
console.log('Нажали остановить воспроизведение ');
// Установим ссылку на анимацию для этапа запуска
$this.attr('data-link',linkSrc);
// Остановим анимацию файла
$('#gifIMG'+id).attr('src',dataSrc);
// Покажем кнопку запуска
$('#play'+id).show('slow');
$this.attr('data-play','off'); // Изменим статус на "предпросмотр"
$('#circle'+id).html('');
console.log('Остановили воспроизведение гифки');
}

}); });

[Вадим]

Александр, а, ну Вам не нужен нативный abort controller. Просто Вам нужно запоминать $.ajax для каждого элемента, по любому из вышеописанных мною вариантов. Например вариант 2 или 3.
В коде у Вас уже есть проверки что нажали. Загрузить или отменить. Соответственно, при "загрузить" запоминаете $.ajax, при "отменить" - считываете его и вызываете .abort()

[Александр]

Вадим, запоминать ajax? Это как возможно? И как потом обратиться к нему?

[Вадим]

Александр, jQuery.ajax возвращает Deffered объект. Аналог промисов в js.
Вы, собственно, уже его запоминаете ajaxCall = $.ajax({...}).
Осталось запоминать не один единственный во внешней переменной, а для каждой гифки - свой.
Как я описал выше. Например, вобъекте, где свойством будет адрес гифки, а значением - deffered объект ajax запроса.
Например:

//Инициализация:
var ajaxMap = {}
// Сохранение
ajaxMap['https://loremGIF/123'] = $.ajax({...})
// Отмена:
ajaxMap['https://loremGIF/123'].abort()

[Александр]

Вадим, аааа.... Вон оно что... Я даже не подумал о таком подходе... Спасибо большое.. Попробую и отпишусь!

[Александр]

Вадим, Буду тестировать, но пока, на первый взгляд, все работает как надо! Еще раз спасибо огромное...

Answer 2

[CoderSoft]

Ну если бэкенд на node то можно получать данные в виде ссылки на запрос и отменить его потом. Если PHP то скорее всего нет.

Comments

[Александр]

Ну тут запрос идет на скачивание файла, а не на обработку php кода... Ссылка сразу на файл указывается

[CoderSoft]

Не важно на что идёт ссылка, я так понимаю вопрос был в том как управлять Ajax запросом, причём асинхронно. Где хранить информацию о запросах. На это и был дан ответ.

[Александр]

CoderSoft, я думал имелось ввиду что не получится прервать выполнение самого php на сервере