前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jeecgboot-vue3-AntDesign笔记(十四)——异步调用后端

jeecgboot-vue3-AntDesign笔记(十四)——异步调用后端

作者头像
用户1637609
发布2022-06-05 12:03:45
4900
发布2022-06-05 12:03:45
举报
文章被收录于专栏:马洪彪马洪彪

错误操作

  • handler
代码语言:javascript
复制
function onDeleteRow(props) {
        console.log("on delete one row",props.row.id); 
        deleteOne({"id":props.row.id});
        console.log("delete succ.");
        loadData();//加载删除后的数据
    }
  • api
代码语言:javascript
复制
export const deleteOne = (params) => { 
  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}); 
}

操作后发现后台记录已删除,前端也执行了查询,但查到的仍然为原来的记录,因为js异步执行的,在后端还没有删除掉之前先执行了查询。

正确操作

  • handler
代码语言:javascript
复制
function onDeleteRow(props) {
        console.log("on delete one row",props.row.id);
        deleteOne({"id":props.row.id},()=>{
            console.log("delete succ.") 
            loadData();//加载删除后的数据
        });
    }
  • api调用
代码语言:javascript
复制
export const deleteOne = (params,handleSuccess) => { 
  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
    handleSuccess();
  }); 
}

更改为执行删除成功后回调查询方法,则当服务端返回删除操作成功后,前端再执行查询操作,查询到的是删除后的数据。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 错误操作
  • 正确操作
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档