接口长时间pending

情况一

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

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

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

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

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

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

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

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

相关推荐
霉运全滚蛋好运围着转18 分钟前
启动 Taro 4 项目报错:Error: The specified module could not be found.
前端
cxxcode21 分钟前
前端模块化发展
前端
不务正业的前端学徒25 分钟前
docker+nginx部署
前端
不务正业的前端学徒30 分钟前
webpack/vite配置
前端
hhcccchh1 小时前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习
yyf198905251 小时前
Vue 框架相关中文文献
前端·javascript·vue.js
粥里有勺糖1 小时前
开发一个美观的 VitePress 图片预览插件
前端·vue.js·vitepress
陟上青云1 小时前
一篇文章带你搞懂原型和原型链
前端
我的写法有点潮1 小时前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
鹏多多1 小时前
jsx/tsx使用cssModule和typescript-plugin-css-modules
前端·vue.js·react.js