// utils/requestPool.js
import axios from 'axios';

// 極簡版并發(fā)池（核心功能：限制并發(fā)、處理超時(shí)、返回結(jié)果）
export async function requestPool(requestList, limit = 4, timeout = 10000) {
  const result = [];
  let running = 0;
  let queue = [...requestList];

  const runRequest = async () => {
    if (queue.length === 0 && running === 0) return result;
    while (running < limit && queue.length > 0) {
      running++;
      const requestFn = queue.shift();
      const index = requestList.length - queue.length - running;
      try {
        const res = await Promise.race([
          requestFn(),
          new Promise((_, reject) => setTimeout(() => reject(new Error('請求超時(shí)')), timeout))
        ]);
        result[index] = { success: true, data: res.data };
      } catch (error) {
        result[index] = { success: false, error: error.message };
      } finally {
        running--;
        await runRequest();
      }
    }
  };
  await runRequest();
  return result;
}

// 極簡請求函數(shù)（按需修改url和參數(shù)）
export function createRequestFn(id) {
  return () => axios({ url: `/api/data/${id}`, method: 'get', timeout: 10000 });
}

<template>
  <div>
    <button @click="handleBatchRequest">發(fā)起30個(gè)并發(fā)請求</button>
    <div class="result">成功：{{ successCount }} 個(gè) | 失敗：{{ failCount }} 個(gè)</div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { requestPool, createRequestFn } from '@/utils/requestPool';
const successCount = ref(0);
const failCount = ref(0);
// 極簡使用示例（30個(gè)請求，并發(fā)數(shù)5）
const handleBatchRequest = async () => {
  const requestList = Array.from({ length: 30 }, (_, i) => createRequestFn(i + 1));
  const results = await requestPool(requestList, 5);
  successCount.value = results.filter(item => item.success).length;
  failCount.value = results.filter(item => !item.success).length;
};
</script>
<style scoped>
.result { margin-top: 20px; font-size: 14px; color: #333; }
</style>

// utils/batchRequest.js
import axios from 'axios';

/**
 * 分批次請求控制
 * @param {Array} requestList - 請求列表（每個(gè)元素是請求參數(shù)，如id）
 * @param {Number} batchSize - 每批請求數(shù)量（默認(rèn)5個(gè)）
 * @returns {Promise} - 所有請求結(jié)果數(shù)組
 */
export async function batchRequest(requestList, batchSize = 5) {
  const result = [];
  // 計(jì)算總批次
  const totalBatch = Math.ceil(requestList.length / batchSize);

  // 循環(huán)發(fā)起每批次請求
  for (let i = 0; i < totalBatch; i++) {
    // 截取當(dāng)前批次的請求參數(shù)
    const currentBatch = requestList.slice(i * batchSize, (i + 1) * batchSize);
    // 發(fā)起當(dāng)前批次的所有請求（并行）
    const batchResult = await Promise.allSettled(
      currentBatch.map(id => 
        axios({
          url: `/api/data/${id}`,
          method: 'get',
          timeout: 10000
        }).then(res => ({ success: true, data: res.data }))
        .catch(err => ({ success: false, error: err.message }))
      )
    );
    // 將當(dāng)前批次結(jié)果存入總結(jié)果
    result.push(...batchResult);
  }

  return result;
}

<script setup>
import { ref } from 'vue';
import { batchRequest } from '@/utils/batchRequest';
const successCount = ref(0);
const failCount = ref(0);
const handleBatchRequest = async () => {
  // 生成30個(gè)請求參數(shù)（如id數(shù)組）
  const requestList = Array.from({ length: 30 }, (_, i) => i + 1);
  // 分批次請求，每批5個(gè)
  const results = await batchRequest(requestList, 5);
  // 處理結(jié)果
  successCount.value = results.filter(item => item.success).length;
  failCount.value = results.filter(item => !item.success).length;
};
</script>

// utils/axiosConfig.js
import axios from 'axios';
// 并發(fā)限制數(shù)
const CONCURRENT_LIMIT = 4;
// 正在執(zhí)行的請求計(jì)數(shù)器
let requestCount = 0;
// 請求隊(duì)列
const requestQueue = [];
// 創(chuàng)建Axios實(shí)例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
});
// 請求攔截器：控制并發(fā)
service.interceptors.request.use(
  config => {
    return new Promise(resolve => {
      // 若當(dāng)前請求數(shù)未達(dá)限制，直接發(fā)起請求
      if (requestCount < CONCURRENT_LIMIT) {
        requestCount++;
        resolve(config);
      } else {
        // 達(dá)到限制，存入請求隊(duì)列
        requestQueue.push(resolve);
      }
    });
  },
  error => {
    return Promise.reject(error);
  }
);
// 響應(yīng)攔截器：請求完成后，從隊(duì)列中取出下一個(gè)請求
service.interceptors.response.use(
  response => {
    // 請求完成，計(jì)數(shù)器減1
    requestCount--;
    // 若隊(duì)列中有請求，取出并執(zhí)行
    if (requestQueue.length > 0) {
      const resolve = requestQueue.shift();
      requestCount++;
      resolve(service.defaults);
    }
    return response;
  },
  error => {
    // 失敗也需計(jì)數(shù)器減1，避免隊(duì)列卡住
    requestCount--;
    if (requestQueue.length > 0) {
      const resolve = requestQueue.shift();
      requestCount++;
      resolve(service.defaults);
    }
    return Promise.reject(error);
  }
);
export default service;

<script setup>
import { ref } from 'vue';
import request from '@/utils/axiosConfig';
const successCount = ref(0);
const failCount = ref(0);
// 直接發(fā)起30個(gè)請求，Axios攔截器自動(dòng)控制并發(fā)
const handleBatchRequest = async () => {
  const requestList = [];
  for (let i = 1; i <= 30; i++) {
    requestList.push(
      request({
        url: `/api/data/${i}`,
        method: 'get'
      }).then(res => ({ success: true, data: res.data }))
      .catch(err => ({ success: false, error: err.message }))
    );
  }
  // 等待所有請求完成
  const results = await Promise.allSettled(requestList);
  successCount.value = results.filter(item => item.success).length;
  failCount.value = results.filter(item => !item.success).length;
};
</script>

// 1. 安裝依賴
// npm install p-limit --save
// 2. 組件中使用
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import pLimit from 'p-limit';
// 設(shè)置并發(fā)限制數(shù)為4
const limit = pLimit(4);
const successCount = ref(0);
const failCount = ref(0);
const handleBatchRequest = async () => {
  // 生成30個(gè)請求函數(shù)，并用p-limit包裝
  const requestList = [];
  for (let i = 1; i <= 30; i++) {
    // 用limit包裝請求函數(shù)，限制并發(fā)
    requestList.push(
      limit(() => 
        axios({
          url: `/api/data/${i}`,
          method: 'get',
          timeout: 10000
        }).then(res => ({ success: true, data: res.data }))
        .catch(err => ({ success: false, error: err.message }))
      )
    );
  }
  // 等待所有請求完成
  const results = await Promise.allSettled(requestList);
  successCount.value = results.filter(item => item.success).length;
  failCount.value = results.filter(item => !item.success).length;
};
</script>