Vue实战指南：如何使用限流技术优化并发请求，提升异步请求性能！
# Vue实战指南：如何使用限流技术优化并发请求，提升异步请求性能！
本文将介绍如何通过使用限流技术来提升异步请求的性能。在Vue应用中，当需要同时发起多个异步请求时，可能会对服务器造成过大的负担，并且可能导致性能下降。通过对异步请求进行限流处理，我们可以控制并发请求数量，减轻服务器压力，提高应用的性能和响应速度。
以下是一个基于Promise实现的限流类RequirePool例子：
```javascript
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);
// })
```
使用：
```javascript
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() => {
// 所有请求都完成了
})
```