Redux Toolkit 中 Request 对象重复使用问题的分析与解决

问题背景

在最近的一次 Chrome 浏览器更新后，许多使用 Redux Toolkit 进行数据请求的开发者遇到了一个棘手的问题：当发起 POST 请求时，控制台会抛出错误提示"无法使用已经被使用过的 Request 对象构造新的 Request"。这个问题特别出现在 Vercel 部署环境中，而本地开发环境却运行正常。

错误现象

开发者们报告的错误信息如下：

TypeError: Failed to execute 'fetch' on 'Window': Cannot construct a Request with a Request object that has already been used.

这个错误主要影响使用 Redux Toolkit Query (RTK Query) 发起的 POST 请求，而 GET 请求则不受影响。值得注意的是，这个问题似乎与特定版本的 Chrome 浏览器（127.0.6533.120）有关，但也在其他浏览器如 Firefox 和 Edge 中复现。

技术分析

Request 对象的不可变性

在 Fetch API 中，Request 对象被设计为不可变的（immutable）。这意味着一旦一个 Request 对象被用于发起请求，就不能再次使用它来构造新的请求。这是浏览器出于安全考虑所做的限制。

Redux Toolkit 的实现方式

Redux Toolkit 的 fetchBaseQuery 内部确实只是简单地调用了原生的 fetch 方法，并没有对 Request 对象做特殊处理。这意味着问题很可能不是直接由 Redux Toolkit 引起的，而是由某些中间件或拦截器导致的。

问题根源

经过开发者社区的排查，发现这个问题与 PostHog 分析工具的最新更新有关。PostHog 在某些情况下会拦截并重用 Request 对象，这违反了 Fetch API 的设计原则，导致了上述错误。

解决方案

1. 临时解决方案：如果项目中使用 PostHog，可以尝试暂时移除或禁用 PostHog 相关代码，确认问题是否解决。

2. 长期解决方案：

   • 等待 PostHog 官方修复此问题
   • 考虑使用其他分析工具替代
   • 在 Redux Toolkit 中实现自定义的 fetch 方法，确保 Request 对象不被重用

3. 代码层面的检查：检查项目中是否有其他中间件或拦截器可能修改或重用 Request 对象。

最佳实践建议

1. 避免直接修改 Request 对象：在自定义 fetch 实现或中间件中，应该创建新的 Request 实例而不是修改已有实例。

2. 谨慎使用分析工具：集成第三方分析工具时，应该充分测试其对网络请求的影响。

3. 错误处理：在 RTK Query 中实现全局的错误处理，以便及时发现和报告类似问题。

总结

这个问题展示了现代前端开发中一个典型的"依赖冲突"场景。虽然 Redux Toolkit 本身实现正确，但与其他库的交互可能导致意外行为。开发者需要保持对项目依赖的全面了解，并在更新任何依赖时进行充分测试。

对于使用 Redux Toolkit 的开发者来说，理解 Fetch API 的基本原理和限制非常重要，这有助于快速定位和解决类似的问题。同时，这也提醒我们在选择第三方库时需要谨慎评估其对核心功能的影响。