最近在一个小项目中遇到这样一个问题,我在前端页面中删除表格中的一行数据,数据库中已经删除,且重新更新了数据并显示,但是表格重新显示的还是之前的数据。查阅网上的资料后,尝试网友的方法,使用v-showCard命令来控制,当数据没有更新结束之前不显示,当数据重新更新后再显示,但是我这样还是失败了。
后来,我发现,可能是删除数据后,前端立刻发送更新数据请求,但此时删除操作还没有结束,原来的数据还在,因此重新请求的数据没有变化。这种情况就需要控制在删除操作结束后再更新数据。
一种方法是可以判断删除是否成功,获得成功后再更新。另一种是删除数据发送后,前端睡眠一会儿(150ms),确保后端成功删除了再发送更新数据请求。相关代码如下:
//...
deleteById(key)
await sleep(200)
//...
//睡眠方法
const sleep = (ms) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, ms)
})
}
//...
不过还是推荐第一种方法,那样更加规范。