当前位置：首页 > news >正文

VUE解决页面请求接口大规模并发的问题（请求队列）

news 来源：原创 2025/6/7 5:18:04

方案1：请求队列

// RequestQueue.js 
export default class RequestQueue {constructor(maxConcurrent) {this.maxConcurrent = maxConcurrent; // 最大并发请求数this.currentConcurrent = 0; // 当前并发请求数this.queue = []; // 请求队列this.requestId = 0; // 请求ID计数器}add(request, meta = {}) {return new Promise((resolve, reject) => {const id = ++this.requestId;this.queue.push({id,request: () => request().then(res => ({id,res})), // 响应携带IDresolve,reject,meta, // 可携带业务标识});this.processQueue();})}processQueue() {while (this.queue.length > 0 && this.currentConcurrent < this.maxConcurrent) {const task = this.queue.shift();this.currentConcurrent++;task.request().then(({id,res}) => {task.resolve({id,meta: task.meta,data: res}); // 返回完整响应}).catch(task.reject).finally(() => {this.currentConcurrent--;this.processQueue();});}}
}

组件调用

import request from '@/utils/request.js'; /** axios的二次封装 */
import RequestQueue from '@/utils/RequestQueue.js';// 使用请求队列
const requestQueue = new RequestQueue(3); // 设定最大并发请求数const urls = [{url: '/slider/getSliders',method: '', // 请求方法data: '',  //  请求参数id: 1,reqType: 'getSliders' // 请求唯一标识符},{url: '/course/mostNew',method: 'post',data: newCoursePageInfo,id: 2,reqType: 'mostNew'},{url: '/course/search',method: 'post',data: interestCoursePageInfo,id: 3,reqType: 'search'}
];// 请求函数:
const fetchData = ({ url, method, data }) => {return request(url, data, method).then((res) => {return res;// res.json();  // 如果是Fetch API必须要显式调用.json()方法解析响应体,注释上边用这个});
};const requests = urls.map((url) => () => fetchData(url));onLoad(() => {Promise.all(requests.map((req, idx) => requestQueue.add(req, { originalIndex: idx, reqType: urls[idx].reqType }))).then((results) => {// results包含[{id, meta, data},...]  data：响应回的数据results.forEach(({ meta, data }) => {switch (meta.reqType) {case 'getSliders':   // 请求唯一标识符swiperList.value = data.list; break;case 'mostNew':interestCouseInfo.value.push(...data.pageInfo.list);break;case 'search':newCourseInfo.value = data.pageInfo.list.slice(3, 9);break;}console.log(`请求${meta.originalIndex}(${meta.reqType})结果:`, data);});});
});