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

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参数已更改-如何发送新请求以自动取消上一个请求？