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

错误操作

• 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();
  }); 
}

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