背景说明
在使用 umi 框架进行开发时，可能会用到 umi-request 或者其内置的 @ahooksjs/use-request（如果你使用的是 ahooks）来处理 HTTP 请求。如果你想取消一个正在进行中的请求，可以使用 AbortController API。
一、使用 AbortController 取消请求
umi-request 支持通过 AbortController 来取消请求。下面是一个基本的例子来展示如何实现这一点：
创建 AbortController 实例
在发起请求之前，先创建一个
AbortController实例。const controller = new AbortController();
设置信号
创建请求信号，并将其传递给
request方法。const signal = controller.signal; umi.request('GET /some/endpoint', { signal });取消请求
当需要取消请求时，调用
abort方法。controller.abort();
二、使用 ahooks的请求
如果你是在使用 @ahooksjs/use-request，那么可以通过设置 manual: true 来手动控制请求的触发，并通过 cancel 方法来取消请求。
import { useRequest } from '@ahooksjs/use-request';
import { Button } from 'antd';
const DemoComponent = () => {
const { loading, start, cancel } = useRequest(
'/some/endpoint',
{
manual: true,
// 其他配置选项...
},
);
return (
<div>
<Button onClick={start}>启动请求</Button>
<Button onClick={cancel}>取消请求</Button>
</div>
);
};
export default DemoComponent;
在这个例子中，当点击“启动请求”按钮时，请求将被触发；而点击“取消请求”按钮时，当前请求将被取消。
请注意，取消请求的行为依赖于你的网络库是否支持这种机制。大多数现代的 JavaScript 网络库都支持 AbortController，因此这种方法应该适用。不过，在某些情况下，如果请求已经完成，则取消可能不会立即生效。
三、关于AbortCOntroller是什么
AbortController 是一个浏览器 API，它允许你取消在某个时刻之前可能已经发生的副作用，比如网络请求或 DOM 操作。AbortController 可以用来优雅地中止那些可以取消的操作，而不是强制停止它们。
主要用途
取消 fetch 请求：在发起一个 fetch 请求后，如果需要取消该请求，可以使用 AbortController。
取消其他操作：任何支持信号参数的操作，理论上都可以通过 AbortController 来取消。
使用方式
AbortController 包含两个属性：
signal：这是一个AbortSignal对象，表示由 AbortController 控制的信号。abort()：这是一个方法，用于手动触发AbortSignal的中断。
创建 AbortController 实例
const controller = new AbortController();
使用 AbortSignal
可以通过 AbortController 的 signal 属性来获取 AbortSignal，并将其传递给需要取消的功能。
fetch(url, { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === "AbortError") {
console.log('Fetch operation was aborted');
} else {
console.error('An unexpected error happened', error);
}
});
// 在某个时候取消请求
controller.abort(); // 触发 AbortSignal
监听 abort 事件
可以在 AbortSignal 上添加 onabort 事件处理器，以监听何时发生中止。
controller.signal.addEventListener('abort', () => {
console.log('Operation was aborted');
});
注意事项
不是所有的 JavaScript API 都支持
AbortSignal。AbortController只能在现代浏览器中使用，对于旧版浏览器可能需要 polyfill。
以上就是 AbortController 的基本介绍和使用方法。这个 API 特别适用于需要能够随时取消的长时间运行任务，如 AJAX 请求或其他可能需要在完成前中断的情况。
