jeecgboot-vue3-AntDesign笔记（十四）——异步调用后端

用户1637609

发布于 2022-06-05 12:03:45

5320

发布于 2022-06-05 12:03:45

文章被收录于专栏：马洪彪

错误操作

handler

function onDeleteRow(props) {
        console.log("on delete one row",props.row.id); 
        deleteOne({"id":props.row.id});
        console.log("delete succ.");
        loadData();//加载删除后的数据
    }

api

export const deleteOne = (params) => { 
  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}); 
}

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

正确操作

handler

function onDeleteRow(props) {
        console.log("on delete one row",props.row.id);
        deleteOne({"id":props.row.id},()=>{
            console.log("delete succ.") 
            loadData();//加载删除后的数据
        });
    }

api调用

export const deleteOne = (params,handleSuccess) => { 
  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
    handleSuccess();
  }); 
}

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-04，如有侵权请联系 cloudcommunity@tencent.com 删除

api