后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何使用 AbortController 在 JavaScript 中中止获取请求
一个简单的获取请求
使用 AbortController
处理取消
关于浏览器兼容性的说明
有时需要中止获取请求。在本文中，我们将探索如何使用 AbortController 快速实现此操作！
如果您喜欢本教程，请给予💓、🦄或🔖并考虑：
📬 注册我的免费每周开发者简报
🎥 订阅我的免费 YouTube 开发者频道
一个简单的获取请求
我们先从一个简单的获取请求开始。我们将获取一些关于我的 Github 帐户的元数据，并将其记录到控制台。
fetch('https://api.github.com/users/nas5w')
.then(res => res.json())
.then(data => {
console.log(data);
});
如果我们检查控制台，我们会看到一个 JSON 对象，它描述了我的账户已登录。以下是部分数据。
{"login":"nas5w","id":7538045,"node_id":"MDQ6VXNlcjc1MzgwNDU=","avatar_url":"https://avatars2.githubusercontent.com/u/7538045?v=4","gravatar_id":"","url":"https://api.github.com/users/nas5w","html_url":"https://github.com/nas5w"...}
使用 AbortController
在相同场景中，我们可以创建该AbortController对象的新实例并传递该实例对象fetch的引用。AbortControllersignal
我的意思是：
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);
});
现在，我们的控制器实例上fetch已经有了对象的引用。我们可以通过调用控制器中的以下方法signal中止获取：abort
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);
});
controller.abort();
如果我们运行这个，我们将不再记录返回的数据，因为我们已经立即中止了我们的fetch请求！
处理取消
您可能已经注意到，在我们最后的代码片段中，我们的fetch请求并没有被正常中止，我们实际上在控制台中看到了一个错误：
Uncaught (in promise) DOMException: The user aborted a request.
为了处理这个取消错误，我们只需要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();
现在，如果我们运行代码，我们会看到我们正常地记录了错误：
DOMException: The user aborted a request.
所以现在我们已经成功中止了我们的获取请求并捕获了相关的错误。
关于浏览器兼容性的说明
大多数现代浏览器都完全支持，AbortController但（当然）如果你必须支持 IE，那你就没那么幸运了！请务必查看相关的MDN 文档，了解完整的兼容性信息。
如果您喜欢本教程，请给予💓、🦄或🔖并考虑：
📬 注册我的免费每周开发者简报
🎥 订阅我的免费 YouTube 开发者频道