我们可能想使用AbortController来中止JavaScript中的多个获取请求。我们怎样才能做到这一点呢？

快速刷新。中止一个请求

让我们快速回顾一下如何使用AbortController 来中止一个fetch 请求。我们首先创建一个新的AbortController 的实例。然后，我们在fetch 函数调用的第二个参数中传递该实例的signal 属性。最后，在我们的实例上调用abort() ，将取消请求并抛出一个错误，我们可以catch 。

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

fetch('https://api.github.com/users/nas5w', { signal })
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

controller.abort();

取消多个请求

当我们考虑取消多个fetch 请求时，我们需要回答的一个问题是，我们是否想在同一时间取消它们，或者我们是否想独立地取消它们（或者至少有这种选择）。通过一个AbortController 的实例，我们可以完成前者，但不能完成后者。

同时取消两个获取请求

如果我们想同时取消两个fetch 的请求，就像把我们相同的signal 的参数也传递给第二个fetch 的调用一样简单！这就是我的意思。

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

// First fetch call
fetch('https://api.github.com/users/nas5w', { signal })
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

// Second fetch call
fetch('https://api.github.com/users/octocat', { signal })
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

controller.abort();

而我们已经取消了两个请求!

独立取消请求

虽然我们可以使用相同的AbortController ，因此也可以使用相同的AbortSignal 来同时取消两个请求，但是如果我们想独立地取消两个请求，我们需要两个不同的AbortController 实例。

const firstController = new AbortController();
const firstSignal = firstController.signal;

// First fetch call
fetch('https://api.github.com/users/nas5w', { signal: firstSignal })
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

const secondController = new AbortController();
const secondSignal = secondController.signal;

// Second fetch call
fetch('https://api.github.com/users/octocat', { signal: secondSignal })
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

// Abort the first request
firstController.abort();

// Abort the second request
secondController.abort();

这就是它的全部内容了!如果你要同时取消请求，你只需使用一个实例AbortController ，否则你要创建两个单独的实例。

浏览器兼容性

大多数现代浏览器都完全支持AbortController ，但（当然）如果你必须支持IE，你就不走运了请务必查看相关的MDN文档以获得完整的兼容性信息。