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

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

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

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

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

二、问题场景

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

这时会面临几个抉择：

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

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

  注意的点

  • 不要对response中的数据进行增删操作。因为重复请求返回Promise中的对象引用地址都是同一个，改动了就会造成数据污染。特殊情况时可以浅拷贝响应结果再处理，或者是增加对应的断言。