浏览器同时可以处理多少个并发请求，如何中断已发送的请求

        浏览器的并发请求数量是指浏览器同时能够发送的 HTTP 请求的数量。浏览器对并发请求数量有一定的限制，这是为了避免对服务器造成过大的负载。当传输量很大，用户想中断传输，如何取消已发送的请求呢

为什么浏览器对并发请求做限制

        一般来说，浏览器的并发请求数量在 6 到 8 个之间，这是因为浏览器通常会限制同一域名下的并发请求数量，以避免对服务器造成过大的压力。这个限制是为了优化网络性能和资源利用。

 但是这样回答不够严谨， 因为请求的协议不一样，对并发的限制也不一样

 浏览器间对并发请求的差异

        不同浏览器的并发请求数量可能会有所不同，但通常在上述范围内。例如，早期的浏览器如 IE6 通常限制为 2 个并发请求，而现代浏览器如 Chrome、Firefox、Safari 等通常限制为 6 到 8 个并发请求。

        这种限制的原理是浏览器为了避免过多的并发请求导致网络拥堵和服务器负载过大，所以对并发请求数量进行了限制。通过限制并发请求数量，浏览器可以更好地管理网络资源，提高页面加载性能和用户体验。

HTTP/1.1 VS HTTP/2

HTTP/1.1 的限制

        在 HTTP/1.1 中，每个请求都需要建立一个独立的 TCP 连接。默认情况下，浏览器对同一域名下的并发请求数量有限制，通常为 6-8 个。 这意味着浏览器在同一时间最多同时发送 6-8 个请求给同一域名下的服务器。超过这个数量的请求将会被排队等待。

HTTP/2的改进

        HTTP/2 的改进主要包括多路复用、头部压缩和服务器主动推送等功能，这些改进都旨在提高性能和效率，使得网络通信更加快速和可靠。

多用复用

        HTTP/2 协议引入了多路复用的机制，可以在同一个 TCP 连接上同时发送多个请求和响应。这样可以提高并发请求数量的效率，减少了建立和关闭连接的开销。

        多路复用的机制允许多个请求同时在一个连接上进行，而不需要按照顺序一个一个地发送。这样就避免了请求排队的情况，提高了请求的响应速度。

头部压缩

    HTTP/2 还引入了头部压缩机制，通过使用专门的压缩算法对请求和响应的头部进行压缩，减少了数据传输的大小。这样可以减少网络带宽的占用，提高传输效率。

主动推送

      此外，HTTP/2 还支持服务器主动推送（Server Push）功能。服务器可以在客户端请求之前主动将一些资源推送给客户端，减少了客户端发起请求的次数，提高了页面加载速度。

如何中断已发送的请求

vue使用axios的请求——cancel token取消请求

对于使用 Axios发送网络请求并取消请求，我们可以结合 Axios 提供的 CancelToken 来实现。注意不要使用你自己封装过的request请求

axios中文文档

 在axios中文文档中介绍了如何取消请求的示例：在发送请求时，在请求头加cancelToken字段。并将axios获取的source.token信息放置请求头中。需要取消请求时，使用source.cancel()方法取消

import axios from 'axios';

// 创建一个 CancelToken.source 实例
const { token, cancel } = axios.CancelToken.source();

// 发送请求时，将 cancelToken 传递给 Axios 的 request 方法
axios.request({
  url: 'https://api.example.com/data',
  method: 'get',
  cancelToken: token
})
.then(response => {
  // 处理响应
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消', error.message);
  } else {
    console.error('请求出错', error);
  }
});

// 取消请求
cancel('请求取消原因');

 在上面的代码中，我们首先通过 axios.CancelToken.source() 方法创建了一个 CancelToken.source 实例，其中包含了一个 token 和一个 cancel 函数。然后，在发送请求时，将 cancelToken 传递给 Axios 的 request 方法的配置中。最后，如果需要取消请求，可以调用 cancel 函数并传入取消请求的原因。

当调用 cancel 函数时，会导致与 token 相关联的请求被取消。在请求被取消时，Axios 会抛出一个 Cancel 错误，我们可以通过 axios.isCancel(error) 方法来判断是否是取消请求导致的错误，并进行相应的处理。

通过使用 CancelToken 和 cancel 函数，我们可以在 Axios 封装的 request 方法中比较方便地取消已经发送的请求。

或者另一种方式

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

Fetch API取消请求处理——AbortController 和 AbortSignal

// 创建一个 AbortController 实例
const controller = new AbortController();
const signal = controller.signal;

// 发送请求时，将 signal 传递给 fetch 或 XMLHttpRequest
fetch('https://api.example.com/data', { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error('请求出错', error);
    }
  });

// 取消请求
controller.abort();

在上面的代码中，我们首先创建了一个 AbortController 实例，并从中获取一个 signal 对象。然后，在发送请求时，将 signal 对象传递给 fetch 函数的配置中。最后，如果需要取消请求，可以调用 controller.abort() 方法来取消请求。

当调用 controller.abort() 方法时，会导致与 signal 相关联的请求被取消。在请求被取消时，fetch 或 XMLHttpRequest 会抛出一个 AbortError 错误，我们可以在 catch 块中捕获这个错误并进行相应的处理。

通过使用 AbortController 和 AbortSignal，我们可以在现代浏览器中比较方便地取消已经发送的请求，避免不必要的网络流量和资源浪费