Как прервать запрос на выборку и сразу же начать новый?

Question

Вот пример из MDN ниже.Есть две кнопки.Один отправляет запрос, а другой отменяет.

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

Теперь мой случай другой.У меня есть параметр query, и если выборка выполняется, но не завершена, и параметр query изменяется - как отправить новый запрос, автоматически отменяя предыдущий?

Answer 1

Не уверен, правильно ли я понял, но из того, что я понимаю, твой случай ничем не отличается нет.

Основы одинаковы, сохраните контроллер где-нибудь доступным для вашей логики, которая может отменить его, и отмените его, если необходимо, перед отправкой нового запроса:

let aborter = null; // make the aborter accessible
function getData(param) {
  // cancel pending request if any
  if(aborter) aborter.abort();
  // make our request cancellable
  aborter = new AbortController();
  const signal = aborter.signal;
  const url = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png?rand=' + param;
  return fetch(url, {signal})
  // clean up, not really needed but may help to know if there is a pending request
  .then(r => {aborter = null; return r;})
}
// first request will get aborted
getData("foo")
  .then(r => console.log('foo done'))
  .catch(e => console.error('foo failed', e.name, e.message));
// will abort the previous one
getData("bar")
  .then(r =>  console.log('bar done'))
  .catch(e => console.error('bar failed', e.name, e.message))