如何讓fetch也可以有timeout效果

最近在公司接到一個小小的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底層:

const Ajax = async (url, options, time) => {
  const controller = new AbortController();
  setTimeout(() => {
    controller.abort();
  }, time);
  let config = { ...options, signal: controller.signal };
  try {
    let response = await fetch(url, config);
    let responseJson = await response.json();
    return responseJson;
  } catch (error) {
    console.error(error);
  }
}

在頁面中引用 :

const getData = async ()=> {
  await Ajax('localhost:3000/posts', someOptions, 5000);
}

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。