按钮点击埋点网络调用不使用await，是否存在潜在隐患？

你的这种处理思路在常规场景下确实能兼顾UI流畅性和埋点需求，但还是存在几个容易被忽略的隐患：

• 未捕获的Promise拒绝报错：如果埋点的网络请求抛出错误（比如跨域失败、服务器错误），未被await的Promise会变成未捕获的拒绝。虽然浏览器不会因此崩溃，但控制台会持续输出错误日志，干扰其他业务问题的排查；在严格模式或部分前端框架的严格校验下，甚至可能触发框架的错误告警，影响开发体验。

• 高频点击下的资源挤占：如果用户短时间内连续点击按钮，会发起大量并发的埋点请求。浏览器的HTTP连接池是有限的，过多的埋点请求会占用连接资源，可能导致后续正常的业务请求（比如接口调用）被排队阻塞，反而间接影响UI响应速度。

• 隐性的内存泄漏风险：如果埋点请求的代码中持有组件实例、DOM元素等上下文引用，未被妥善处理的Promise可能会让这些资源无法被垃圾回收。长期频繁触发的话，可能积累内存占用，导致页面卡顿。

• 可避免的埋点数据丢失：虽然你表示不在乎请求失败，但有些场景下的丢失是可以避免的——比如用户点击按钮后立即跳转页面，未await的请求可能还没完成发送就被浏览器终止。如果后期业务需要更准确的埋点数据，这种处理方式会让数据准确性大打折扣。

优化建议 #

不需要await也能规避大部分问题：

• 给埋点请求加上catch，手动捕获并忽略错误，避免未捕获的Promise拒绝：

  // 示例：给fetch请求加catch
  fetch('/track', { method: 'POST', body: data }).catch(() => {});
  

• 对高频点击的按钮做防抖处理，减少重复的埋点请求；
• 如果需要提升上报成功率，可以使用fetch的keepalive选项，即使页面跳转也能完成请求发送，同时不会阻塞UI：

  fetch('/track', { method: 'POST', body: data, keepalive: true }).catch(() => {});
  

内容的提问来源于stack exchange，提问作者J Seabolt