接口长时间pending

情况一

页面是这样的,主页面是一个表格数据,然后有新增、编辑、删除等功能,新增编辑的时候会弹出一个对话框进行操作,正常功能应该是在对话框上进行一些数据配置以后就可以点击保存按钮,调用保存接口进行保存,然后会关闭对话框,然后再进行一次表格的重新获取查询。

问题来了,现场用户在进行新增或者编辑的时候,点击保存按钮,会发现保存接口一直pending,状态会持续好几分钟,等几分钟以后才会调用成功,但是这个时候页面已经断开连接了,而且不会关闭对话框,然后问我怎么处理。但是这个功能在我们本地环境测试的时候是可以实现的,包括现场提出这个问题以后我又在本地环境测试了好几次,发现功能也是可以正常使用的,所以我就一直认为是现场服务器的问题。

后面又想是不是数据量过大,导致接口调用慢,但是这个保存接口传入的参数也只是一个配置表单,接口返回的数据也只有一个状态,来告诉我们是保存成功还是失败,并没有多大的数据处理,而且让后端人员去打印接口调用时间,发现也只有几十毫秒。

所以我又开始进行别的测试,我又想是不是接口返回以后我的后续处理有问题,因为我在获取状态以后会进行两个操作,一是关闭对话框,二是重新调用查询接口。

此时我就开始去把我的后续操作也就是关闭对话框和重新获取主页面表格都注释掉,看看是不是这两步操作影响的,当我注释以后发给现场测试,反馈是可以正常调用接口了,不会长时间处于pending状态了。这我就很懵逼了,因为这样看来好像问题又出现在前端身上了,但是这种调用保存接口以后关闭对话框然后重新获取数据的操作,在一个前端眼里是很正常的事情啊,不懂为什么会出现这种错误。

当时我觉得是不是因为重新获取接口的数据量过大,导致查询接口卡顿,从而影响到这个保存接口,但是我不理解,为什么查询接口会影响保存接口呢,而且如果数据量过大,那我刚进入页面的时候调用查询接口应该也会卡顿,但是并没有这种情况,而且我把重新获取主页面表格数据的操作注释以后,保存接口还是会长时间处于pending状态,所以这个猜测pass。

所以还剩下关闭对话框的操作,关闭对话框为什么会影响到接口?我不理解。后来发现,对话框里的设备配置,是一个下拉选择框,里面的数据是刚点开编辑对话框以后就会调用接口获取的,而现场的获取设备接口返回的数据有几万条...几万条数据在一个下拉框里面,我想都不敢想。后面我把设备配置的下拉选择框修改为一个禁用输入的输入框后面再在输入框里插槽配置一个按钮,点击按钮弹出一个设备对话框,这个时候再调用获取设备的接口,而且进行分页,而不是把那几万条设备数据渲染在编辑对话框里,就解决了这个问题。

所以这个接口一直处于pending状态的原因是这个编辑对话框的渲染DOM太多,导致在保存接口后续处理关闭编辑对话框时造成卡顿影响到了接口。我原先一直以为只有生成过多DOM结构的时候会出现卡死问题,原来销毁过多的DOM结构的时候也会出现卡死问题。那为什么再刚进入页面渲染这么多DOM结构的时候都没有卡死,而只是在销毁的时候出现卡死,我只能理解为这是在调用(保存)接口的时候同步进行大量DOM结构的生成或者销毁更容易卡死,从而导致接口一直处于pending状态,具体什么原因有人知道可以在评论区帮我讲解一下,谢谢。

相关推荐
万少8 小时前
Vibe Coding不停歇,移动端 TRAE SOLO 让你用手机也能编程啦
前端·javascript·后端
kyriewen119 小时前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
开发语言·前端·javascript·c++·单元测试·ecmascript
烛衔溟10 小时前
TypeScript 接口的基本使用 —— 定义对象形状
前端·javascript·typescript
铁皮饭盒10 小时前
成为AI全栈 - 第3课:路由 RESTful Elysia 状态码 设计规范
前端·后端·全栈
顾昂_10 小时前
Web 性能优化完全指南
前端·面试·性能优化
前端程序媛-Tian11 小时前
前端 AI 提效实战:从 0 到 1 打造团队专属 AI 代码评审工具
前端·人工智能·ai
支付宝体验科技11 小时前
Ant Design Pro v6.0.0 发布
前端
T畅N12 小时前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
AlunYegeer12 小时前
JAVA,以后端的视角理解前端。在全栈的路上迈出第一步。
java·开发语言·前端
IT_陈寒12 小时前
Redis这个内存杀手,差点让我们运维半夜追杀我
前端·人工智能·后端