接口长时间pending

情况一

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

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

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

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

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

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

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

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

相关推荐
0思必得0几秒前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东51627 分钟前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino31 分钟前
图片、文件的预览
前端·javascript
layman05282 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔3 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李3 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN3 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒3 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库3 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
电商API_180079052473 小时前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫