如何用JavaScript的Promise优化处理多个重复的请求？

本文共计493个文字，预计阅读时间需要2分钟。

一、为什么要写这篇文章？处理重复请求的文章，许多大家也看过很多，大多分为两种版本：在response返回之前发现重复请求就return掉，以及使用节流/防抖来避免用户频繁操作。

一、为什么要写这个文章？

处理重复请求的文章想必大家也看过了很多，大多数都是分为在response返回之前发现重复请求就return掉的和使用节流/防抖来间接规避用户频繁操作两种版本的。最近在使用的过程的中，发现这两个版本在某些场景下还是有些局限性。

二、问题场景

如图，我这个h5的页面，顶部和底部都要显示这个名片组件。这些名片的信息是通过一个接口来获取的，当这个组件在当前页面被初始化时，就会发生两次重复的请求。

这时会面临几个抉择：

1. 不对重复请求做任何处理。

• 缺点1：造成不必要的资源浪费，增大服务器的压力
• 缺点2：codepen.io/waldonUB/pen/ZEeeONM
  

  注意的点

  • 不要对response中的数据进行增删操作。因为重复请求返回Promise中的对象引用地址都是同一个，改动了就会造成数据污染。特殊情况时可以浅拷贝响应结果再处理，或者是增加对应的断言。
  • 处理重复的请求时，最好在log中提示一下，同时在组件中注释好原因和使用场景，避免他人误改
  • 做好极端情况下，请求失败的处理，设置有效时间置空和移除请求信息，避免因为闭包堆积过多无用的请求信息造成内存泄漏。

  到此这篇关于JavaScript使用promise处理多重复请求的文章就介绍到这了,更多相关js promise多重复请求内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！