前端性能优化秘笈：SingleFlight 合并请求，让你的应用飞起来

前端

2023-02-09 02:14:18

减少并行请求，提升前端性能：SingleFlight 入门指南

解决并行请求的挑战

在前端开发中，我们经常面临着多个组件同时向相同接口发起请求的场景。这种并行请求会导致不必要的网络开销，从而影响应用的性能。

想象一个电商网站的商品详情页面，它可能包含多个组件，如商品图片、价格和库存，都需要向同一 API 请求数据。如果每个组件都单独发起请求，就会产生大量的重复请求，浪费带宽并增加服务器负担。

SingleFlight：合并请求的利器

SingleFlight 是一种巧妙的解决方案，旨在解决并行请求的问题。它的工作原理非常简单：

创建 SingleFlight 服务： 初始化一个 SingleFlight 服务，作为所有请求的中央协调器。
检查请求是否存在： 当一个组件需要发起请求时，它首先向 SingleFlight 服务查询，查看是否有其他组件已经发起了相同的请求。
等待或发起请求： 如果已有其他组件发起了请求，则当前组件等待请求返回结果；如果还没有人发起请求，则当前组件自己发起请求，并将结果存储在 SingleFlight 服务中。

通过这种机制，SingleFlight 确保多个组件对同一接口只发起一次请求，有效地提升了前端应用的性能。

代码示例

以下是一个使用 SingleFlight 合并请求的代码示例：

const singleFlight = new SingleFlight();

function fetchProductInfo(productId) {
  return singleFlight.call(productId, async () => {
    // 发起请求获取商品信息
    const response = await fetch(`api/product/${productId}`);
    const data = await response.json();
    return data;
  });
}

// 多个组件同时发起对商品信息接口的请求
const productInfo1 = fetchProductInfo(1);
const productInfo2 = fetchProductInfo(1);

// 等待请求结果
const result1 = await productInfo1;
const result2 = await productInfo2;

// 结果相同
console.log(result1 === result2); // true