【javascript】如何给fetch请求设置超时时间，以及结合Promise使用的相关用法

自由de单车

已于 2023-11-23 15:41:14 修改

阅读量2.6k

点赞数

于 2023-11-23 15:15:08 首次发布

本文链接：https://blog.csdn.net/ljfrocky/article/details/134575079

版权

本文介绍了如何在fetch请求中设置超时时间，通过AbortController实现请求超时功能。此外，还详细讲解了Promise.all(), Promise.race(), Promise.any()以及Promise.allSettled()的用法，帮助理解并提升并发请求处理能力。" 84935133,6652326,数据库原理：嵌套查询与集合操作,"['数据库理论', 'SQL查询', '数据模型']

摘要由CSDN通过智能技术生成

前言

在javascript中，fetch函数是用来进行网络请求的，但默认情况下它是不支持超时设置的，如果想要支持超时功能，需要借助AbortController类来实现。

超时设置

fetch函数支持接收一个signal信号，当达到超时时间后，我们可以给fetch函数传递一个信号，让它结束当前请求，从而实现请求超时功能。
而传递signal需要用到AbortController类，代码示例：

// 默认超时时间是5秒
function timeoutFetch(timeout = 5000) {
   
  return (url, option = {
    }) => {
   
    const controller = new AbortController()
    option.signal = controller.signal
    // 设置一个定时器，超时后调用abort方法结束当前请求
    const tid = setTimeout(() => {
   
      console.error(`Fetch timeout: ${
     url}`)
      controller.abort()
    }, timeout)
    return fetch(url, option).finally(() => {
   
      clearTimeout(tid) // 得到请求结果后，要清除定时器
    })
  }
}

用法示例：

// 请求超时时间设置为1秒，接口响应时间为2秒
timeoutFetch(1000)('http://localhost/myProjects/PHP/test/test.php?name=promise1&sleep=2&success=1')
  .then(
    // resolve函数
    response => {
   
      console.log('进入resolve逻辑，成功了')
      console.log(response)
    },
    // reject函数
    reason => {
   
      console.log('进入reject逻辑，失败了')
      console.log(reason)
    }
  )