最近發(fā)現(xiàn)很多人其實都沒用過一個原生的很強大的 API，那就是 AbortController ，可能很多人在用 axios 的時候用過這個 API 來 中斷請求，但是其實大部分人不知道，其實 AbortController 不止能用來做這些，它非常強大！

AbortController 的基本用法如下：

• signal： 打上標(biāo)記
• abort： 執(zhí)行中斷

圖片

中斷請求 & 請求超時

AbortController 的可以用來中斷請求，大家都知道，但是都是通過 axios，那么原生的請求怎么中斷呢？其實 axios 也是基于原生請求封裝的嘛！

fetch 請求時可以接收一個 signal 的參數(shù)，打上標(biāo)記，并且通過這個標(biāo)記所屬的實例來進(jìn)行中斷。

圖片

如果你不想手動去取消請求，而是想做自動的 請求超時，你可以使用 AbortSignal.timeout。

圖片

事件監(jiān)聽中斷

事件監(jiān)聽 是很常見的場景，我們需要使用 addEventListener 去給目標(biāo)元素綁定事件，并且需要使用 removeEventListener 去中斷這些監(jiān)聽。

圖片

但是其實很多人都不知道，addEventListener 其實可以傳入第三個參數(shù)，第三個參數(shù)可以傳入一個對象，這個對象中可以傳入一個 signal 的屬性，當(dāng)做中斷的標(biāo)記。

圖片

所以 AbortController 也可以用在這里，用來中斷事件監(jiān)聽，你可以選擇用多個 AbortController 實例來分別取消事件的監(jiān)聽

圖片

你也可以用同一個 AbortController 實例來取消所有的事件監(jiān)聽

圖片

發(fā)布訂閱

我們可以監(jiān)聽到 abort 的執(zhí)行，需要對 controller.signal 進(jìn)行監(jiān)聽 abort 事件

圖片

所以其實我們可以通過這個特性，讓 AbortController 來充當(dāng) 發(fā)布訂閱 的作用

圖片

AbortSignal.any

有時候，你的中斷條件只依賴于一個 AbortController，而有時候，一個中斷條件需要依賴多個 AbortController 來決定，那應(yīng)該咋做呢？貌似我們剛剛的 signal 只能傳入一個。

其實，確實只能傳入一個，但是我們可以將多個組合成一個，來傳入，就像是 Promise.all、Promise.race、Promise.any 那樣。

而在這里我們可以使用 AbortSignal.any。

圖片

兼容性

圖片