el-dialog弹窗关闭时调了两次刷新数据的接口

 一、场景：

弹窗是父组件通过dialog调用子组件的方式，然后在弹窗里面修改完内容，点击关闭按钮时，需要刷新父组件列表数据。但是调了两次刷新列表的接口。

父组件：

<!-- 新增/编辑数据弹窗 --><el-dialog style="width: auto;" v-model="dataSourceVisible" :title="$t(isEdit ? 'dataSource.editDataSource' : 'dataSource.addDataSource')" @close="handleClose" destroy-on-close><component :is="DataSource" :OBJECT_GUID="OBJECT_GUID" :PARENT_PATH="PARENT_PATH" @close="handleClose" :showPerformance="showPerformanceList" @refreshDataList="refreshDataList" /></el-dialog>

// 关闭新增/编辑数据源弹窗
const handleClose = () => {OBJECT_GUID.value = '';showPerformanceList.value = false;dataSourceVisible.value = false;requestDataSource();
}

 

二、解决方法：

防抖函数：

// 关闭新增/编辑数据源弹窗
const handleClose = () => {OBJECT_GUID.value = '';showPerformanceList.value = false;dataSourceVisible.value = false;debounceRequestDataSource();
}
// 防抖函数
let requestTimeout = null;
const debounceRequestDataSource = () => {if (requestTimeout) {clearTimeout(requestTimeout);}requestTimeout = setTimeout(() => {requestDataSource();}, 300);
};
const refreshDataList = () => {requestDataSource();
}

通过函数防抖就能防止关闭弹窗时调取两次刷新数据的接口。

三、优化拓展：

 建议关闭的时候不要调取刷新数据的接口，因为如果在弹窗里面啥操作都不做，关闭时还刷新数据就不太友好。建议在保存或者提交的时候刷新数据。

子组件：

const emit = defineEmits(["back", "close", "refreshDataList"]);

保存/提交时：

function dataSubmit(name, isPublish) {proxy.$refs[name].validate(async (valid) => {if (!valid) {return false;}// 提交try {......     const data = await handleSubmitRequest(...);emit("refreshDataList");...} catch (e) {console.log("submit error", e);} finally {...}});
}

父组件：

<!-- 新增/编辑数据弹窗 --><el-dialog style="width: auto;" v-model="dataSourceVisible" :title="$t(isEdit ? 'dataSource.editDataSource' : 'dataSource.addDataSource')" @close="handleClose" destroy-on-close><component :is="DataSource" :OBJECT_GUID="OBJECT_GUID" :PARENT_PATH="PARENT_PATH" @close="handleClose" :showPerformance="showPerformanceList" @refreshDataList="refreshDataList" /></el-dialog>

子组件通知父组件刷新数据 

const refreshDataList = () => {requestDataSource();
}