Javascript 中止以前的远程呼叫

我正在寻找一种方法来控制对同一Web服务的重复调用，如果有两个相同的远程请求，我想中止第一个。 还不确定我是否能用。如果我调用

controller.abort（）

before

fetch

I中止后续调用

<button class="download"> fetch </button>
<button class="abort"> abort </button>
<script>
var controller = new AbortController();
var signal = controller.signal;

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

downloadBtn.addEventListener('click', fetchJson);

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

function fetchJson() {

  // TODO abort previous remote call here
  // controller.abort(); // won't work

  fetch("http://fakeapi.jsonparseronline.com/posts", {signal}).then( async response => {
    console.log(await response.json())
  }).catch(function(e) {
    console.error(e)
  })
}
</script>

fetch
中止
var controller=new AbortController（）；
var信号=控制器信号；
var downloadBtn=document.querySelector（'.download'）；
var abortBtn=document.querySelector（'.abort'）；
downloadBtn.addEventListener（'click'，fetchJson）；
abortBtn.addEventListener（'click'，function（）{
controller.abort（）；
log（“下载中止”）；
});
函数fetchJson（）{
//TODO在此处中止上一个远程调用
//controller.abort（）；//不起作用
取回（“http://fakeapi.jsonparseronline.com/posts“，{signal}）。然后（异步响应=>{
log（wait response.json（））
}).catch（函数（e）{
控制台错误（e）
})
}

取消上一次提取后，您必须为每次提取创建一个新的中止控制器。

AbortController

的信号只设置一次，类似于只解析一次承诺的方式，它会在以后保留该值。因此，如果您不更新

AbortController

，则

fetch

将看到一个已中止的信号

let controller = new AbortController();

document.querySelector('.download').addEventListener('click', fetchJson);
document.querySelector('.abort').addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

async function fetchJson() {
  controller.abort(); // abort previous fetch here

  controller = new AbortController(); // make new fetch abortable with a fresh AbortController
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  const signal = controller.signal;
  try {
    const response = await fetch("http://fakeapi.jsonparseronline.com/posts", {signal});
    console.log(await response.json());
  } catch() {
    console.error(e)
  }
}

---

“不起作用”的确切含义是什么？在取消上一次提取后，您可能必须为每次提取创建一个新的AbortController。@Bergi，正如我所说，“不起作用”，我的意思是“如果我调用controller.abort（）；在提取之前我中止后续调用”啊，是的，这是预期的。这就是我尝试过的，而且似乎是有效的。谢谢我不知道为什么如果我在

fetch

之前中止，我希望以下请求被中止。。