关于浏览器请求队列和超时表现(canceled)

时间：2024-10-18 07:01:24

前端在向服务器 API 发送请求时一般会设置一个超时时间，避免超过期望时间的持续等待。

以 Axios 为例，一般会设置 timeout 请求超时选项。

但是浏览器判断超时并不是这么简单。

搭建环境

express + axios 搭建 web 服务。

在项目目录下安装依赖：npm i express axios

添加文件：

// 
const express = require('express')

const PORT = 3000

let app = express()

app.use(express.static(path.join(__dirname, 'public')))
app.use('/api', require('./timeout'))

app.listen(PORT, () => {
  console.log(`Sever listening on port ${PORT}`)
})


// 
const express = require('express');

const router = express.Router()

router.get('/timeout', async (req, res) => {
  // 用于查看服务器接收到请求的时机
  console.log('timeout')
	// 5 秒后响应
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

module.exports = router


<!-- public/ -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="/axios@0.24.0/dist/"></script>
  </head>
  <body>
    <script>
      const instance = axios.create({
        timeout: 1000 // 超过1秒超时，中止请求
      })

      function fetch() {
        instance.get('/api/timeout')
      }
      
      fetch()
    </script>
  </body>
</html>

运行 node ，访问 http://localhost:3000

正常超时

正常情况下，浏览器发送请求，超过设置的时间后，axios 就会主动中断请求。

F12 开发人员工具的网络面板中可以看到，请求状态为 canceled（已取消）。

在这里插入图片描述

竞态场景

实际场景下，页面中经常会有多个请求同时发起，而不同浏览器也会限制同一时间处理请求的最大数量。这就会产生竞态，首先发起的请求就会被优先处理。超过上限的请求会强制挂起（pending），当前面的请求接收响应移出队列，腾出位置，挂起的请求才允许发送给服务器。

关键在于，请求挂起的过程中消耗的时间仍参与超时时间计算。

这就会有一些无法预料的超时场景，例如：

  • A请求耗时长，B在等待A的时候消耗过多时间，等到处理B请求的时候，时间所剩无几，还没等服务器响应，浏览器就主动中断了B请求
  • A请求耗时长，B在等待A的时候达到超时时间，浏览器中止B请求，可怜B请求的服务器什么都还没做
  • 等等

相同地址竞态

同一时间，浏览器只会处理同一地址的一个请求，其它的会挂起。

// public/
const instance = axios.create({
  timeout: 8000 // 超过8秒超时，中止请求
})

function fetch() {
  instance.get('/api/timeout')
}

// 同时发起两个相同地址的请求
fetch()
fetch()

同时发起两个相同地址的请求，仅处理第一个，后面的会挂起，等待前面的请求结束

在这里插入图片描述

5秒后（如果只考虑服务器处理的时间）第一个接收响应（处理完成），轮到第二个，此时第二个的请求时间已经消耗了5秒

在这里插入图片描述

达到8秒时间上限，浏览器中止第二个请求。

在这里插入图片描述

同源不同地址竞态

浏览器允许同域名下多个不同地址的并发请求，但也设置了数量上限，例如 Chrome 上限为 6 个。

添加多个不同地址的5秒响应接口：

const express = require('express');

const router = express.Router()

router.get('/timeout', async (req, res, next) => {
  console.log('timeout')
	// 5 秒后响应
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout2', async (req, res, next) => {
  console.log('timeout2')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout3', async (req, res, next) => {
  console.log('timeout3')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout4', async (req, res, next) => {
  console.log('timeout4')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout5', async (req, res, next) => {
  console.log('timeout5')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout6', async (req, res, next) => {
  console.log('timeout6')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout7', async (req, res, next) => {
  console.log('timeout7')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

router.get('/timeout8', async (req, res, next) => {
  console.log('timeout8')
  setTimeout(() => {
    res.status(200).end('OK')
  }, 5000);
})

module.exports = router


// public/
const instance = axios.create({
  timeout: 8000 // 超过8秒超时，中止请求
})

function fetch(num) {
  instance.get('/api/timeout' + (num || ''))
}

// 同一时间发送多个不同地址的请求
['',2,3,4,5,6,7,8].forEach(v => fetch(v))

同一时间向同域名下不同地址的接口发送请求，最多处理6个请求，其它的全部挂起

在这里插入图片描述

5秒后（如果只考虑服务器处理的时间）优先处理的6个请求接收响应（处理完成），挂起的请求进行补位，此时剩余接口的请求时间已经消耗了5秒

在这里插入图片描述

达到8秒时间上限，浏览器中止超时的请求。

在这里插入图片描述

不同源下地址竞态

浏览器对不同源下的请求不进行竞态，这就是使用 CDN 提高资源并行加载效率的原因。这里就不做示例了。

关于同源参考：浏览器的同源策略

总结

  • 前端设置的请求超时时间是从 JS 发起请求开始计算
  • 浏览器同一时间处理请求有数量上限，超过上限的请求将被挂起，等待处理队列空闲才会依次处理剩下的请求
  • 浏览器挂起的请求依然参与超时时间计算
  • 为避免请求在真正发送到服务器之前被浏览器消耗时间，可以使用 CDN 等不同源的请求地址，或定制超时重试机制。

相关文章