JavaScript调用API出现Request content was evicted from inspector cache报错如何解决

你遇到的Failed to load response data:Request content was evicted from inspector cache报错属于Chrome/Chromium内核浏览器开发者工具的缓存限制问题，并非JS请求逻辑或者接口本身调用失败，接口实际已正常返回，仅无法在开发者工具网络面板查看响应内容。

产生原因 #

• 开发者工具缓存容量上限低：Chrome DevTools默认给网络请求响应分配的缓存空间仅为数百MB，当连续发起多个返回大体积数据（大JSON、二进制文件、媒体流等）的请求时，旧请求的响应内容会被主动清理出缓存，再次查看就会触发该报错。
• 单请求响应体积超过阈值：单个请求的响应体超出DevTools单条请求的默认缓存上限，会直接不被缓存，打开响应面板时就会提示内容被驱逐。
• 开启了「禁用缓存」设置：若在开发者工具网络面板勾选了「禁用缓存」选项，同时页面频繁发起请求，响应内容不会持久存储在DevTools缓存中，回溯查看时就会丢失。
• 页面上下文被销毁：请求发起后刷新页面、跳转路由，原请求对应的缓存上下文被销毁，再查看历史请求的响应也会触发该报错。

对应解决方法 #

• 调高DevTools缓存容量：在Chrome地址栏输入chrome://flags/#devtools-network-cache-size，找到「DevTools Network Cache Size」选项，将默认值调整为更高的容量（例如1024MB或更高），重启浏览器后生效。
• 控制大体积请求的查看数量：如果接口返回的是超过10MB的大体积数据，不要同时在网络面板打开多个这类请求的响应标签，看完及时关闭，降低缓存占用。
• 临时关闭「禁用缓存」：无缓存调试需求时，取消网络面板「禁用缓存」的勾选，让响应可以正常存入DevTools缓存，调试上线前需重新勾选测试缓存场景逻辑。
• 控制台打印响应调试：调整缓存后仍无法查看的话，可以在JS请求的回调逻辑中添加console.log(response)将响应内容打印到控制台，控制台日志的缓存容量远大于网络面板，不会被轻易清理。
• 用专业抓包工具查看：如果是超大体积响应的调试需求，可以使用Fiddler、Charles等专业抓包工具捕获请求，这类工具无缓存容量限制，可正常查看所有请求的响应内容。

内容的提问来源于stack exchange，提问作者pranay dwivedi