Kalan's Blog

Kalan 頭像照片,在淡水拍攝,淺藍背景

四零二曜日電子報上線啦!訂閱訂起來

本部落主要是關於前端、軟體開發以及我在日本的生活,也會寫一些對時事的觀察和雜感
本部落格支援 RSS feed(全文章內容),可點擊下方 RSS 連結或透過第三方服務設定。若技術文章裡有程式碼語法等特殊樣式,仍建議至原網站瀏覽以獲得最佳體驗。

目前主題 亮色

我會把一些不成文的筆記或是最近的生活雜感放在短筆記,如果有興趣的話可以來看看唷!

新的取消請求方式 - AbortController

在前端當中,我們主要可以透過兩種方式來發送請求:XHRFetch。XHR 是從,嗯...,很久以前就有的 API。不過因為設定上很麻煩,所以時常被包裝成更高階的 API 使用,像是 jQuerygetJSONaxios、RxJS 的 AjaxObservable 等等。

而近幾年隨著 Promise 逐漸流行的 Fetch API 可以大幅改進這些問題。除了回傳值為 Promise,方便操作之外,API 也相當簡單。

不過儘管如此,還是有一項致命的缺點。Fetch 無法取消請求,雖然我們可以透過 setTimeout 的方式讓回傳值被忽略,不過請求一樣會繼續等待。在 XHR 裡頭,我們可以用 XMLHttpRequest.abort 來做取消,但 fetch 當中並沒有類似的 API。

直到最近!終於出現了新的救星,AbortController

The abort() method of the AbortController interface aborts a DOM request (e.g. a Fetch request) before it has completed. This is able to abort fetch requests, consumption of any response Body, and streams.

使用方式很簡單

const abortController = new AbortController()
const signal = abortController.signal

然後再將 signal 傳入 fetch 就可以了。

fetch("/long-running", { signal: signal })

當你呼叫 abortController.abort 時,會透過 signal 傳到 fetch 裡頭。如果接收到 signal 時請求還沒完成,這個請求就會被取消。

fetch("/long-running", { signal: signal })
setTimeout(() => abortController.abort(), 5000)

如果在五秒內還沒完成請求,就會被取消。


搭配 RxJS 包裝一下或許可以讓整個 API 更方便使用。不過目前瀏覽器的支援度還沒有很好。

上一篇

和 CORS 與 cookie 打交道

下一篇

記一次 debug 流程 — connection refused

如果覺得這篇文章對你有幫助的話,可以考慮到下面的連結請我喝一杯 ☕️ 可以讓我平凡的一天變得閃閃發光 ✨

Buy me a coffee