前端页面请求接口较多怎么优化?

1、首先浏览器本身可以限制并发请求数:以防止过多的并发请求导致系统崩溃或响应变慢.

一般浏览器支持的最大并发请求数为6; 假如有10个请求,前1-6先并发请求,当有一个先完成时,后面的立即补位,

注意:并发请求数量的限制是针对每个域名的，并不是针对整个浏览器。如果网页中存在多个域名（例如加载外部脚本、样式表、图片等），那么每个域名都可以同时发起一定数量的请求。

2、为了更好的控制并发请求数量,可以让后端将多个请求合并为单个连接.

3、BFF接口聚合:

BFF 架构模式通过在后端引入一个针对前端应用的专用服务层，将原本的 接口API 服务器分解成多个微服务，每个微服务只提供某个具体的功能接口
BFF 接口聚合是指在 BFF（Backend For Frontend）架构中，将多个后端接口聚合成一个接口，以满足前端应用的需求;
(1)在传统的前后端分离架构中，前端应用可能需要调用多个后端接口来获取不同的数据。这种情况下，前端应用需要发送多个请求，然后等待这些请求返回后再进行数据的拼装和处理。这样的方式会引入额外的网络延迟，并且增加了前端应用的复杂性。
(2)BFF 接口聚合可以在 BFF 层将多个后端接口聚合成一个接口，然后一次性地从后端获取所需的数据。这样，前端应用只需发送一次请求，就能够获取到所有需要的数据，从而减少了网络延迟和复杂性。

BFF 接口聚合可以通过以下几种方式实现：

(1)服务端聚合：在 BFF 层编写逻辑，通过调用多个后端接口并将数据进行组合，最终返回给前端应用。这种方式需要在 BFF 层处理数据的聚合和转换，通常需要使用异步操作（如 Promise 或 async/await）来处理多个接口的并发调用。

(2)后端响应聚合：在后端服务层通过网关或代理的方式，将多个后端接口的响应进行聚合，然后返回给 BFF 层。这种方式将聚合的逻辑放在了后端服务层，BFF 只需发送一次请求，后端处理聚合逻辑并返回结果。

无论使用哪种方式，BFF 接口聚合都可以有效地减少前端应用需要发送的请求数量，提高了性能和开发效率。同时，它还能够提供更灵活的接口设计，满足前端应用特定的需求。但需要注意的是，在进行接口聚合时，要考虑到后端接口之间的依赖关系、并发调用的性能影响以及数据的转换和组装等因素。

4、axios分批次请求,可以手写一个限制并发请求个数的函数(基于Promise.all)实现分批次请求,当第一批次的请求结果拿到之后再发送第二批次的请求.

//分配次请求入参:
requestData: [
        {
          pageNo: 1,
          pageSize: 1,
        },
        {
          pageNo: 1,
          pageSize: 2,
        },
        {
          pageNo: 1,
          pageSize: 3,
        },
        {
          pageNo: 1,
          pageSize: 5,
        },
        {
          pageNo: 1,
          pageSize: 6,
        },
        {
          pageNo: 1,
          pageSize: 8,
        },
        {
          pageNo: 1,
          pageSize: 20,
        },
        {
          pageNo: 1,
          pageSize: 50,
        },
        {
          pageNo: 1,
          pageSize: 100,
        },
      ],
      
## 第一种方法----async/await 来实现
 this.makeRequests(this.requestData, 2);     //调用
`async makeRequests(requestData, batchSize) {
      for (let i = 0; i < requestData.length; i += batchSize) {
        const batch = requestData.slice(i, i + batchSize);
        const requests = batch.map((item) => transactionApi.holidayList(item));   //transactionApi.holidayList为请求数据的接口
        try {
          const results = await Promise.all(requests);
          // 处理响应结果
          results.forEach((item) => {
            console.log(item)   //响应结果
          });
        } catch (error) {
          console.error(error);
        }
      }
      console.log('所有请求已完成');
    },

## 第二种方法---使用递归
this.makeRequests(this.requestData, 2);     //调用
makeRequests(requestData, batchSize, index = 0) {
      if (index >= requestData.length) {
        console.log('所有请求结果已完成');
        return;
      }
      const batch = requestData.slice(index, index + batchSize);
      const requests = batch.map((item) => transactionApi.holidayList(item));
      Promise.all(requests).then((results) => {
        results.forEach((item) => {
          this.tableData = item.holidayList;
          this.total = Number(item.totalCount);
        });
        this.makeRequests(this.requestData, batchSize, index + batchSize); //拿到结果后递归显示
      });
    },