如何中止获取请求并立即开始新的请求？

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))