Offer页面因多API调用加载缓慢，寻求优化方案

以下是几种切实可行的优化方案，解决串行调用API导致的页面加载慢问题：

1. 并行发起API调用 #

代替逐个串行请求，同时向所有供应商发起API调用，大幅缩短总耗时。注意使用支持并发的异步工具，同时处理部分请求失败的情况：

比如在JavaScript中使用Promise.allSettled（避免单个请求失败导致全部请求终止）：

const fetchAllOffers = async () => {
  const supplierApiList = [
    'https://supplier-a.com/offers',
    'https://supplier-b.com/offers',
    'https://supplier-c.com/offers'
  ];

  // 并行发起所有请求
  const requestResults = await Promise.allSettled(
    supplierApiList.map(apiUrl => fetch(apiUrl))
  );

  // 筛选成功的响应并解析数据
  const validOffers = await Promise.all(
    requestResults
      .filter(result => result.status === 'fulfilled')
      .map(result => result.value.json())
  );

  return validOffers.flat();
};

其他语言也有对应工具：Python用aiohttp+asyncio.gather，Java用CompletableFuture.allOf。

2. 引入缓存机制 #

将供应商返回的Offer数据缓存到中间件（如Redis、Memcached）或本地数据库，避免每次页面加载都重复调用API：

• 根据供应商数据的更新频率设置缓存过期时间（比如15分钟到1小时）
• 前端优先读取缓存数据，后台异步更新缓存，确保数据新鲜度
• 对热门供应商的Offer设置更长缓存时间，冷门供应商缩短周期

3. 后台预加载与异步更新 #

• 定时任务拉取：在后台设置定时任务（如每30分钟），主动调用所有供应商API，将最新Offer数据同步到数据库或缓存，前端直接读取本地存储的数据，完全避免页面加载时的API调用延迟
• 前端渐进式加载：页面初始化时先展示缓存的旧Offer数据，同时后台异步调用API获取最新数据，拿到结果后再更新页面内容，用户几乎感知不到加载延迟

4. 搭建API聚合层（BFF） #

在前端和供应商API之间增加一层后端服务（Backend For Frontend）：

• 由这层服务统一并行调用所有供应商API，聚合、清洗数据后返回给前端
• 前端只需发起一次请求到聚合层，减少前端请求数和复杂度
• 聚合层可内置缓存、超时控制、错误降级等逻辑，集中处理异常情况

5. 超时控制与降级策略 #

给每个供应商API调用设置合理的超时时间（如3-5秒），超时则跳过该供应商的Offer：

• 避免单个慢接口拖垮整个页面的加载流程
• 页面可展示“部分供应商数据加载中”的提示，或先展示已成功加载的Offer，后续再补全超时的部分

内容的提问来源于stack exchange，提问作者user2520135