在 Vue3 中，AbortController?用于取消?fetch?請求，避免組件卸載后仍執行異步操作導致的潛在問題（如內存泄漏或更新已銷毀組件的狀態）。以下是詳細用法和最佳實踐：

---

一、基本用法

1. 創建?AbortController?實例
   在組件?setup()?中創建實例，并通過?signal?關聯請求：

   javascript

   import { onUnmounted } from 'vue';export default {setup() {const controller = new AbortController();const signal = controller.signal;// 發送請求時傳遞 signalfetch('/api/data', { signal }).then(response => response.json()).catch(err => {if (err.name === 'AbortError') {console.log('請求已取消');} else {console.error('請求失敗:', err);}});// 組件卸載時取消請求onUnmounted(() => controller.abort());return {};},
   };

---

二、結合異步操作

在異步函數中結合?AbortController：

javascript

import { onUnmounted } from 'vue';export default {setup() {const controller = new AbortController();const fetchData = async () => {try {const response = await fetch('/api/data', { signal: controller.signal });const data = await response.json();// 處理數據} catch (err) {if (err.name === 'AbortError') {console.log('請求已取消');} else {console.error('請求失敗:', err);}}};fetchData();onUnmounted(() => controller.abort());},
};

---

三、管理多個請求

單個?AbortController?可取消多個請求：

javascript

const controller = new AbortController();// 請求1
fetch('/api/data1', { signal: controller.signal });// 請求2
fetch('/api/data2', { signal: controller.signal });// 取消所有請求
controller.abort();

---

四、與 Axios 結合使用

如果使用 Axios，可通過?CancelToken（舊版）或?AbortController（Axios >= 0.22.0）取消請求：

javascript

import axios from 'axios';const controller = new AbortController();axios.get('/api/data', {signal: controller.signal,
}).then(response => { /* ... */ }).catch(err => {if (axios.isCancel(err)) {console.log('請求已取消');}});// 取消請求
controller.abort();

---

五、注意事項

1. 兼容性
   AbortController?在現代瀏覽器中支持良好，但需考慮舊版瀏覽器兼容性（可通過?polyfill?解決）。

2. 錯誤處理
   捕獲?AbortError?避免未處理的 Promise 拒絕。

3. 復用 Controller
   每次新請求前創建新的?AbortController，避免重復使用已取消的實例。

---

六、最佳實踐

• 在組件卸載時取消請求：在?onUnmounted?生命周期鉤子中調用?abort()。

• 封裝可復用的邏輯：將取消邏輯封裝到自定義 Hook 中（如?useFetch）。

• 避免內存泄漏：確保所有未完成的請求在組件銷毀時被取消。

---

通過合理使用?AbortController，可以有效管理 Vue3 中的異步操作，提升應用性能和穩定性。