前端 vue单页面中请求数量过多问题 控制单页面请求并发数

在Vue单页应用中，控制请求的并发数可以通过一些技术手段来实现，例如使用axios的拦截器或者使用其他工具如lodash的flow或throttle。

以下是一个使用axios拦截器来控制请求并发数的例子：

import axios from 'axios';
 
// 创建一个请求队列
const requestsQueue = [];
let concurrentRequests = 0; // 当前正在进行的请求数
const MAX_CONCURRENT_REQUESTS = 3; // 最大并发数
 
// 拦截器：请求前执行
axios.interceptors.request.use(config => {
  // 将请求加入队列
  requestsQueue.push(config.url);
 
  // 如果当前请求数小于最大并发数，则直接发送请求
  if (concurrentRequests < MAX_CONCURRENT_REQUESTS) {
    concurrentRequests++;
    return config;
  }
 
  // 如果达到最大并发数，阻塞请求，等待其他请求完成
  return new Promise(resolve => {
    const intervalId = setInterval(() => {
      if (concurrentRequests < MAX_CONCURRENT_REQUESTS) {
        concurrentRequests++;
        clearInterval(intervalId);
        resolve(config);
      }
    }, 100);
  });
});
 
// 拦截器：响应后执行
axios.interceptors.response.use(response => {
  // 移除队列中的请求
  const index = requestsQueue.indexOf(response.config.url);
  if (index !== -1) {
    requestsQueue.splice(index, 1);
  }
 
  // 请求完成后减少当前请求数
  concurrentRequests--;
 
  return response;
});
 
// 使用axios发送请求
axios.get('/api/data1')
  .then(response => console.log(response));
 
axios.get('/api/data2')
  .then(response => console.log(response));
 
// ...等等其他请求

在这个例子中，我们使用了axios的拦截器来控制并发请求数。当请求数达到最大并发数时，后续的请求会被阻塞，直到有请求完成并减少当前请求数。这样可以防止大量的并发请求同时发送给服务器，从而减轻服务器压力，并可能提高页面的加载性能。