JavaScript 请求取消怎么实现请求取消的生成器处理
在 javascript 中，使用 fetch api 发起的请求可以通过传入一个 abortcontroller 实例的 signal 属性来实现取消。具体做法是创建一个控制器实例，将其 signal 传递给 fetch 函数，并在需要时调用控制器的 abort() 方法。当请求被取消时，fetch 会抛出一个 domexception（通常名为 "aborterror"），开发者需要在代码中捕获这个异常以处理取消逻辑。
如何结合 async/await 和 try/catch 优雅地处理取消信号
将 AbortController 与 async/await 结合使用时，最优雅的处理方式是使用 try...catch 块包裹异步调用。在 try 块中执行 fetch，如果用户触发了取消操作，fetch 会立即抛出错误并跳转到 catch 块。在 catch 块中，通过检查错误对象的 name 属性是否为 "AbortError" 来区分正常错误和取消操作，从而避免将取消视为真正的程序错误。
const controller = new AbortController();
const signal = controller.signal;
// 模拟触发取消
setTimeout(() => {
controller.abort();
}, 1000);
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data', { signal });
const data = await response.json();
console.log(data);
} catch (error) {
if (error.name === 'AbortError') {
console.log('请求已取消');
} else {
console.error('发生错误:', error);
}
}
}
fetchData();
基于 AbortController 实例的具体问题：如何在多个并发请求中统一取消
当需要同时发起多个请求并在某一时刻统一取消它们时，可以复用同一个 AbortController 实例的 signal。将所有请求的 signal 设置为同一个对象，然后只需调用一次 controller.abort()，所有使用该信号的请求都会同时被终止。这种方法避免了为每个请求单独创建控制器带来的资源浪费和管理复杂性。
const controller = new AbortController();
const signal = controller.signal;
const urls = [
'https://api.example.com/users',
'https://api.example.com/posts',
'https://api.example.com/comments'
];
async function fetchAll() {
const promises = urls.map(url =>
fetch(url, { signal }).then(res => res.json())
);
try {
const results = await Promise.all(promises);
console.log(results);
} catch (error) {
if (error.name !== 'AbortError') {
console.error('部分请求失败:', error);
}
}
}
fetchAll();
// 3秒后统一取消所有请求
setTimeout(() => controller.abort(), 3000);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
