背景說明
在使用 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 請求或其他可能需要在完成前中斷的情況。
