给fetch方法添加timeout的方法

给fetch方法添加timeout的方法

• 问题背景

  • 在某些时候我们需要对基于fetch的AJAX方法添加timeout，但是不同于XMLHttpRequest，fecth不支持设置timeout。

• 解决方法

  • Promise.race([…])

    • Promise.race()接受以数组形式传入的多个Promise对象，等待第一个resolved或rejected的Promise对象作为自己的状态。

  • 使用Promise.race([…])为fetch添加一个定时resolved的Promise对象

    const timeout = function(){
      return new Promise((resolve,reject) => {
        setTimeout(() => {
          resolve('timeout')
        },3000);
      })
    }
    
    const fetchFn = async function(){
     	const url = "...";
      const requestBody = {
        method: 'GET'
      }
      await fetch(url,requestBody);
    }
    
    function timeoutFecth = async function(){
      try{
        const res = Promise.race([timeout(),fetchFn()])
        if(res === 'timeout')
          {
            console.log('timeout');
          }
      }catch(err){
        console.warn('error',err);
      }
    }