告别防抖和节流：用更底层的once-init解决JS重复请求

2023-09-29 00:15:42

抛弃防抖和节流：用更底层的方式解决JS的重复请求

在现代Web开发中，我们经常需要处理用户在短时间内触发的大量请求。为了避免服务器超载并提供更好的用户体验，防抖和节流技术应运而生。然而，这些技术有时会显得不够优雅，甚至会带来意想不到的问题。本文将介绍一种更底层的解决方案——once-init，它从Promise的基础功能出发，彻底阻止了重复请求的发生。

传统防抖和节流技术的局限性

防抖和节流是一种基于计时器的技术，它们通过延迟或合并请求来减少对服务器的冲击。然而，这些技术存在一些固有的局限性：

计时器不准确： 计时器受浏览器环境的影响，在不同的设备上可能产生不同的延迟。
无法阻止所有重复请求： 如果用户在计时器窗口内触发了大量请求，那么这些请求仍会被发送到服务器。
难以处理异步请求： 防抖和节流难以处理异步请求，例如Promise或async/await函数。

`once-init`：一种基于`Promise`的解决方案

once-init是一种新颖的解决方案，它从Promise的定义出发，提供了一种更底层的方式来阻止重复请求。Promise具有一个内在的特性：一旦一个Promise被解析或拒绝，它将不再响应后续调用。

once-init利用了这一特性。它将异步请求封装在一个Promise中，并在请求初始化时立即解析Promise。这样，无论用户触发了多少次请求，只有第一个请求会被发送到服务器。后续请求将被Promise的已解析状态静默丢弃。

`once-init`的优势

与传统防抖和节流技术相比，once-init具有以下优势：

绝对可靠： once-init利用Promise的特性，确保只有第一个请求会被发送到服务器。
无需计时器： once-init不需要计时器，从而消除了与计时器相关的不准确性和复杂性。
处理异步请求： once-init可以无缝地处理异步请求，包括Promise和async/await函数。

`once-init`的使用方法

使用once-init非常简单。以下是一个示例：

const onceInit = () => {
  // 异步请求的函数
  const asyncRequest = async () => {
    // ...发送请求
  };

  // 将异步请求封装在Promise中
  const promise = asyncRequest();

  // 立即解析Promise
  promise.resolve();

  // 返回Promise
  return promise;
};

// 在需要的地方使用onceInit
onceInit().then((result) => {
  // 请求的结果
});