前端一次性请求大量接口的情况下进行优化处理

mounted(){
       this.$axios.post(this.$global.basUrl + 'api/demo/public/getNames', { type: 'class' }).then(res => {
                var data = res.data
                if (data.code == 1) {
                    this.stuList = data.data
                    data.data.map(item => {
                         this.$axios.post(this.$global.basUrl + 'api/demo/public/getClassStu', { class: item.id }).then(response => {
                             item.children = response.data.data
                        })
                    })
                } else {
                    this.statusPd(data)
                }

        })
}

这是起初的写法，需要将第一次的数据里的对象的id在调取一次接口，并将调取的结果返回给children里，但是由于调取的内容不确定性后续接口可能会更多，就会导致浏览器耗时及内存增大。下面是使用了节流的方式来限制了同时进行的请求数量。

data(){
  return{
    MAX_CONCURRENT_REQUESTS: 5, // 设置最大并发请求数
    currentRequests: 0, // 当前正在进行的请求数
    requestQueue: [], // 请求队列
  }
}

mounted(){
   this.$axios.post(this.$global.basUrl + 'api/demo/public/getNames', { type: 'class' }).then(res => {
                var data = res.data
                if (data.code == 1) {
                    this.stuList = data.data
                    data.data.map(item => {
                         this.throttledFetch.call(this,item);
                    })
                } else {
                    this.statusPd(data)
                }

        })
},
methods:{
 throttledFetch(item) {
            return new Promise((resolve, reject) => {
                // 当当前请求数小于最大并发数时，执行请求并递增计数器
                if (this.currentRequests < this.MAX_CONCURRENT_REQUESTS) {
                    this.currentRequests++;
                    this.$axios.post(this.$global.basUrl + 'api/demo/public/getClassStu', { class: item.id })
                        .then(response => {
                            item.children = response.data.data;
                            resolve(); // 请求成功，解决Promise
                        })
                        .catch(error => {
                            reject(error); // 请求失败，拒绝Promise
                        })
                        .finally(() => {
                            this.currentRequests--; // 无论成功或失败，都递减计数器
                            this.processQueue(); // 尝试处理队列中的下一个请求
                        });
                } else {
                    // 如果当前请求数已经达到最大并发数，将请求加入队列
                    this.requestQueue.push({ item, resolve, reject });
                }
            })
        },
 processQueue() {
            if (this.currentRequests < this.MAX_CONCURRENT_REQUESTS && this.requestQueue.length > 0) {
                const { item, resolve, reject } = this.requestQueue.shift(); // 取出队列中的第一个请求
                this.throttledFetch.call(this,item) // 调用节流函数，并将this上下文传递进去
                    .then(resolve) // 如果成功，解决队列中的Promise
                    .catch(reject); // 如果失败，拒绝队列中的Promise
            }
      }
}

首先定义了两个函数：throttledFetch 和 processQueue。throttledFetch 函数负责执行实际的请求，并管理当前正在进行的请求数和请求队列。如果当前请求数小于最大并发数，则执行请求；否则，将请求添加到队列中。processQueue 函数负责检查是否有空闲的并发槽位，并从队列中取出请求来执行。

注意，在 throttledFetch 函数中返回了一个新的 Promise，这样我们就可以在队列中管理每个请求的解决（resolve）和拒绝（reject）。当请求成功或失败时，我们更新当前请求数，并尝试处理队列中的下一个请求。

最后，在初始请求成功后遍历 data.data 数组，并对每个元素调用 throttledFetch 函数来发起节流请求。这样，我们就可以确保同时进行的请求数不会超过我们设置的最大并发数。这是改动之后的请求耗时。