Fetch 請求超時如何實作

Jess
再不寫就要忘了
Oct 15, 2020

最近在公司接到一個小小的react native案子,整個app只有兩頁,之前使用vue做網頁平台的時候,與後端請求溝通都是使用axios這個套件,有很多的config參數可以設定,裡面就包含了請求逾時timeout。

可是我並不想只為了這些十支以內的api去裝axios套件,所以打算自己用fetch寫一個api底層,當然fetch最大的問題就在於:他沒有timeout這種參數給你設定。

要是你網路不穩,他就會一直等啊等啊等啊~

上網找了一堆資料,其中有些人提出用Promise.race方法,概念是:在race陣列中放入兩個function,一個是call api的fetch,另一個是單純的setTimeout,要是setTimeout先完成,就表示逾時拉~

但是在繼續查又看到google大大有提出超完美解法:原文在這裡

概念是:我們一樣使用在我們用fetch寫的api底層,只不過在這個方法裡直接開始數,數到你規定的時間到的時候,就呼叫abort,而這個abort會出發有signal標記的那個function,也就是我們的fetch,直接把它取消掉,並且還會自動拋出一個Abort的錯誤,讓你try catch捕捉到abort錯誤,就可以顯示「無法連線到網路」這種提示拉~

fetch底層:

在頁面中引用 :

--

--

Jess
再不寫就要忘了

之後的文章都會搬到https://penueling.com發表囉!