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;