最近發(fā)現(xiàn)很多人其實(shí)都沒(méi)用過(guò)一個(gè)原生的很強(qiáng)大的 API，那就是 AbortController ，可能很多人在用 axios 的時(shí)候用過(guò)這個(gè) API 來(lái) 中斷請(qǐng)求，但是其實(shí)大部分人不知道，其實(shí) AbortController 不止能用來(lái)做這些，它非常強(qiáng)大！

AbortController 的基本用法如下：

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

圖片

中斷請(qǐng)求 & 請(qǐng)求超時(shí)

AbortController 的可以用來(lái)中斷請(qǐng)求，大家都知道，但是都是通過(guò) axios，那么原生的請(qǐng)求怎么中斷呢？其實(shí) axios 也是基于原生請(qǐng)求封裝的嘛！

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

圖片

如果你不想手動(dòng)去取消請(qǐng)求，而是想做自動(dòng)的 請(qǐng)求超時(shí)，你可以使用 AbortSignal.timeout。

圖片

事件監(jiān)聽(tīng)中斷

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

圖片

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

圖片

所以 AbortController 也可以用在這里，用來(lái)中斷事件監(jiān)聽(tīng)，你可以選擇用多個(gè) AbortController 實(shí)例來(lái)分別取消事件的監(jiān)聽(tīng)

圖片

你也可以用同一個(gè) AbortController 實(shí)例來(lái)取消所有的事件監(jiān)聽(tīng)

圖片

發(fā)布訂閱

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

圖片

所以其實(shí)我們可以通過(guò)這個(gè)特性，讓 AbortController 來(lái)充當(dāng) 發(fā)布訂閱 的作用

圖片

AbortSignal.any

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

其實(shí)，確實(shí)只能傳入一個(gè)，但是我們可以將多個(gè)組合成一個(gè)，來(lái)傳入，就像是 Promise.all、Promise.race、Promise.any 那樣。

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

圖片

兼容性

圖片