接口长时间pending

情况一

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

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

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

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

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

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

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

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

相关推荐
A_aspectJ27 分钟前
【Bootstrap V4系列】学习入门教程之 组件-输入组(Input group)
前端·css·学习·bootstrap·html
兆。41 分钟前
电子商城后台管理平台-Flask Vue项目开发
前端·vue.js·后端·python·flask
互联网搬砖老肖1 小时前
Web 架构之负载均衡全解析
前端·架构·负载均衡
sunbyte2 小时前
Tailwind CSS v4 主题化实践入门(自定义 Theme + 主题模式切换)✨
前端·javascript·css·tailwindcss
湛海不过深蓝3 小时前
【css】css统一设置变量
前端·css
程序员的世界你不懂3 小时前
tomcat6性能优化
前端·性能优化·firefox
爱吃巧克力的程序媛3 小时前
QML ProgressBar控件详解
前端
进取星辰3 小时前
21、魔法传送阵——React 19 文件上传优化
前端·react.js·前端框架
wqqqianqian3 小时前
国产linux系统(银河麒麟,统信uos)使用 PageOffice 在线打开Word文件,并用前端对话框实现填空填表
linux·前端·word·pageoffice
BillKu3 小时前
CSS实现图片垂直居中方法
前端·javascript·css