不用防抖和节流，用更底层的方式解决JS的重复请求

最新推荐文章于 2023-06-28 11:19:13 发布

短暂又灿烂的

最新推荐文章于 2023-06-28 11:19:13 发布

阅读量197

点赞数

分类专栏：优化方案方法 javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42232156/article/details/127510415

版权

优化方案同时被 3 个专栏收录

38 篇文章 1 订阅 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

javascript

121 篇文章 7 订阅

订阅专栏

方法

53 篇文章 3 订阅

订阅专栏

本文介绍了一种解决JavaScript中异步函数重复请求的方法，通过缓存Promise和执行队列来确保同一时间只有一个Promise处于pending状态。once-init库实现了这个核心思想，允许在异步函数执行期间避免重复请求，同时提供了缓存刷新、参数处理和TypeScript支持。通过npm安装后，可以轻松地应用到项目中，如axios请求的防重复发送。

摘要由CSDN通过智能技术生成

你或许在项目中遇到过这样的情况。

成员A成员B都用得上一个后端接口api，但它们互相不知道对方什么时候请求这个接口，因此导致一打开页面，同一个接口竟然重复请求了多次。
由于用户手抖，又因为成员忘记做请求的loading防误触处理，导致一个接口被用于疯狂请求，最终数据乱套，页面不可用。
SPA单页面应用，多个页面甚至是多个组件可能有同样的数据请求，完全可以共享的数据却不得不重复请求，影响页面加载效率。
想要用节流或者防抖解决上面的问题，但是后端返回数据的时间浮动太大，导致不知道应该设置多长的时间。
这些请求浪费，实际上都有调用异步函数（async function）的参与的；因此，它们虽不是async function的问题，但却可以利用async function的特点来解决。

async function本质上是一个Promise。因此只要利用好Promise的特性，就能解决这些问题。

once-init 正是为解决这些问题而生。它从 Promise 的定义出发，用 Promise 的基础功能彻底地阻止了异步请求浪费的发生。

我用它做了两件事：

缓存请求的返回值；
缓存Promise请求本身；


原理
once-init 的核心思想是缓存和执行队列；

缓存返回值
实现缓存返回值并不困难，只要写一个单例模式就好了。下面是一个缓存的单例模式的简单示例；