XMLHttpRequest

XMLHttpRequest 可以使用 abort() 方法來實現請求取消。

  const xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:3000/api/txt');xhr.timeout = 2;xhr.ontimeout = function () {xhr.abort();console.error('請求超時，已中斷');};xhr.onload = function () {if (xhr.status === 200) {console.log(xhr.responseText);}}send.onclick = function () {xhr.send();}

fetch

fetch 內部API并不能實現請求的取消，需要借助 AbortController來實現。

AbortController接口表示一個控制器對象，允許你根據需要中止一個或多個 Web 請求。

要完成請求取消，就必須要與異步請求進行通訊，使用AbortSignal對象可以完成與異步操作的通信。而 AbortController.signal會返回一個AbortSignal 對象實例,作為一個選項傳遞進入請求的選項對象中，就是作為請求第二參數對象的屬性，這將 signal 和 controller 與 fetch 請求相關聯，并且允許我們通過調用 AbortController.abort() 去中止它， AbortController.abort()方法可以中止一個尚未完成的異步操作。

• 創建了一個AbortController對象
  在請求外部創建AbortController對象

 const controller = new AbortController();

• 通過controller.signal獲取對應的AbortSignal對象。

const signal = controller.signal

• 將AbortSignal對象作為Fetch請求的signal選項傳遞給fetch函數

fetch('http://localhost:3000/api/txt',{signal // AbortSignal對象})

• 調用controller.abort()方法，觸發AbortSignal對象的abort事件，終止Fetch請求

 stop.addEventListener('click',()=>{// 終止請求controller.abort();})

• 在請求被終止后，進入catch塊，進行錯誤處理。
  需要注意的是，終止請求后，Fetch請求的Promise會被拒絕，并且會拋出一個AbortError錯誤。因此，在處理錯誤時，可以通過判斷錯誤類型為AbortError來區分是否是請求被終止的情況。

catch(error => {// 處理錯誤if (error.name === 'AbortError'){// 中斷請求alert('請求被終止')}else {console.error(error);}});

使用AbortController和AbortSignal可以靈活地控制和終止Fetch請求，特別適用于需要及時取消請求的場景，如用戶取消操作或超時處理。

Axios

Axios本質還是 XMLHttpRequests

從 v0.22.0 開始，Axios 支持以 fetch API 方式—— AbortController 取消請求：

const controller = new AbortController();
axios.get('/foo/bar', {signal: controller.signal
}).then(function(response) {//...
});
// 取消請求
controller.abort()

也可以用cancel token 取消一個請求。Axios 的 cancel token API 從 v0.22.0 開始已被棄用

具體可以查閱官網