Vue实战指南：如何使用限流技术优化并发请求，提升异步请求性能！

本文将介绍如何通过使用限流技术来提升异步请求的性能。在Vue应用中，当需要同时发起多个异步请求时，可能会对服务器造成过大的负担，并且可能导致性能下降。通过对异步请求进行限流处理，我们可以控制并发请求数量，减轻服务器压力，提高应用的性能和响应速度。

以下是一个基于Promise实现的限流类RequirePool例子：

class RequirePool {
    constructor(funcArray,limit = 100) {
        const newfuncArray = funcArray.filter(item => { return  this.isPromise(item) })
        return this.PromiseAllLimit(newfuncArray,limit)
    }
    isPromise(p){
        if (typeof p === 'object' && typeof p.then === 'function') {
            return true;
        }
        return false;
    }
    PromiseAllLimit(funcArray, limit = 100) {
        funcArray = funcArray.filter(item => { return  this.isPromise(item) })

        let i = 0;
        const result = [];
        const executing = [];
        //判断是否是 Promise 函数
        const isPromise = (p) => { return this.isPromise(p); }
        const queue = function() {
            if (i === funcArray.length) return Promise.all(executing);
            const thatfunc = funcArray[i++];
            let p = thatfunc
            if(thatfunc && !isPromise(thatfunc)){
                p = thatfunc()
            }
            if(!isPromise(p)){
                console.error('非Promise函数！',p)
            }
            result.push(p);
            const e = p.then(() => executing.splice(executing.indexOf(e), 1));
            executing.push(e);
            if (executing.length >= limit) {
                return Promise.race(executing).then(
                    () => queue(),
                    e => Promise.reject(e)
                );
            }
            return Promise.resolve().then(() => queue());
        };
        return queue().then(() => Promise.all(result));
    }
}
export default (funcArray,concurrNum) => { return new RequirePool(funcArray,concurrNum) }

export const requirePool = (funcArray,concurrNum) => { return new RequirePool(funcArray,concurrNum) }

// test
// const promiseList = [
//     new Promise((resolve, reject) => {
//         resolve('李四1')
//     }),
//     new Promise((resolve, reject) => {
//         setTimeout(() => {
//             resolve('李四2')
//         },200)
//     }),
//     new Promise((resolve, reject) => {
//         resolve('李四3')
//     }),
//     new Promise((resolve, reject) => {
//         resolve('李四4')
//     })
    
// ]
// 设置 1 就是按顺序一个一个执行
// new RequirePool(promiseList,1).then(res => {
//     console.log("22222222222  ",res);
// })

使用：

import requirePool from './requirePool'

const initTaskArr = [
  store.dispatch('initIsMultiple', config.isMultiple),
  store.dispatch('initSysConfig'),
  store.dispatch('initToken'),
  store.dispatch('initUserInfo'),
  store.dispatch('initAuthToken'),
  store.dispatch('initInfoAppInfo'),
  store.dispatch('checkOpenThreeMember'),
]
requirePool(initTaskArr,3).then() => {
    // 所有请求都完成了
})