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;