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

如何中止获取请求并立即启动一个新请求？

1 个答案: