其他分享
首页 > 其他分享> > jeecgboot-vue3-AntDesign笔记(十四)——异步调用后端

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

作者:互联网

错误操作

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

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

正确操作

function onDeleteRow(props) {
        console.log("on delete one row",props.row.id);
        deleteOne({"id":props.row.id},()=>{
            console.log("delete succ.") 
            loadData();//加载删除后的数据
        });
    }
export const deleteOne = (params,handleSuccess) => { 
  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
    handleSuccess();
  }); 
}

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

标签:delete,删除,deleteOne,jeecgboot,vue3,AntDesign,props,id,row
来源: https://www.cnblogs.com/mahongbiao/p/16341402.html