Promise解决fetch超时-2种方案

// 方案1
function fetch (url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 5000)
  })
}

function fetchWidthTimeout (url, time) {
  return new Promise((resolve, reject) => {
    fetch(url).then(res => {
      resolve('fetch请求成功')
    })

    setTimeout(() => {
      reject('fetch请求失败')
    }, time * 1000)
  })
}

fetchWidthTimeout('baidu.com', 3).then(res=>{
  // 正常流程
  console.log(res, '正常流程')
}).catch(err=>{
  // 超时
  console.log(err, '超时')
})

// 方案2（推荐）
// Promise.race
function fetch (url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('成功')
    }, 5000)
  })
}

function fetchWidthTimeout (url, time) {
  const timeout = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(500)
    }, time * 1000)
  })

  return Promise.race([
    fetch(url),
    timeout
  ])
}

fetchWidthTimeout('baidu.com', 7).then(res=>{
  // 正常流程
  console.log(res, '正常流程')
}).catch(err=>{
  // 超时
  console.log(err, '超时')
})