接口长时间pending

情况一

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

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

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

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

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

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

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

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

相关推荐
_请输入用户名2 分钟前
Vue 3 源码项目结构详解
前端·vue.js
少卿13 分钟前
Next.js 国际化实现方案详解
前端·next.js
掘金挖土15 分钟前
手摸手快速搭建 Vue3 + ElementPlus 后台管理系统模板,使用 JavaScript
前端·javascript
CoderHing16 分钟前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
前端·javascript·react.js
一念之间lq18 分钟前
Elpis 第三阶段· 领域模型架构建设
前端·后端
哆啦A梦158825 分钟前
商城后台管理系统 01 Vue-i18n国际化
前端·javascript·vue.js
期待のcode29 分钟前
Vue的安装创建与运行
前端·javascript·vue.js
百锦再32 分钟前
国产数据库的平替亮点——关系型数据库架构适配
android·java·前端·数据库·sql·算法·数据库架构
旺仔Sec32 分钟前
2025年海南省职业院校技能大赛“应用软件系统开发“赛项竞赛样题
前端·应用软件系统开发