fetch的timeout超時設置

最近在一個項目裏面須要作請求超時的處理，可是本來接口請求用的是fetch，並且fetch不支持超時處理，爲了有較小的改動就可以實現超時不得不去本身封裝或者找第三方插件解決這個問題，在看了一些開源插件後（如fetch-timeout），本身封裝了一個fetch_timeout。

首先介紹下思路，核心是利用創建一個超時的abortPromise和接口請求的fetchPromise傳入 Promise.race() 來進行處理，哪一個Promise先返回結果則最終輸出這個Promise的返回值。具體以下

 

建立abortPromise

let abort = null; let abortPromise = new Promise((resolve, reject) => { abort = () => { return reject({ code: 504, message: "請求超時！" }); }; });

 

建立fetchPromise

let fetchPromise=fetch(url,prama)

 

傳入Promise.race，設置一個定時器用於觸發abortPromise內部函數abort返回一個Promise結果，而後返回最後輸出的Promise爲 resultPromise

// 最快出結果的promise 做爲結果
let resultPromise = Promise.race([fecthPromise, abortPromise]); setTimeout(() => { abort(); }, timeout); return resultPromise;

 

封裝

/** * 實現fetch的timeout 功能 * @param {object} fecthPromise fecth * @param {Number} timeout 超時設置，默認5000ms * */
 
function fetch_timeout(fecthPromise, timeout = 5000) { let abort = null; let abortPromise = new Promise((resolve, reject) => { abort = () => { return reject({ code: 504, message: "請求超時！" }); }; }); // 最快出結果的promise 做爲結果
  let resultPromise = Promise.race([fecthPromise, abortPromise]); setTimeout(() => { abort(); }, timeout); returnresultPromise.then(res => {

      clearTimeout(timeout);

      return res;

   });

} export default fetch_timeout;