前言
在Vue项目中promise函数实现与后台交互时,发现有些只需要改一个数据的接口,但仍然不得不再次调用查询所有数据接口
当我们只需要更改/切换表格数据中的状态栏时,我们原本的代码是:
const request = { ...apis.UPDATE_WORK_STATUS };
request['params'] = {
id,
workStatus
};
this.$request(request)
.asyncThen((resp) => {
this.$message({
message: this.$t('common.successEdit'),
type: 'success'
});
this.queryStaff('', this.pagination.currentPage, this.pagination.pageSize);
}, (res) => { })
这样一来,我们会冗余的调用两个方法。
此时我们发现,每次更新状态栏数据时都会刷新整个页面。我们是否有办法让他局部刷新?
当然有。
const request = { ...apis.UPDATE_WORK_STATUS };
request['params'] = {
id,
workStatus
};
this.$request(request)
.asyncThen((resp) => {
this.$message({
message: this.$t('common.successEdit'),
type: 'success'
});
// this.queryStaff('', this.pagination.currentPage, this.pagination.pageSize);
this.tableData.filter((item) => {
if (item.id === id) {
item.workStatus = workStatus;
}
})
}
当我们换成上面的代码时,问题就会迎刃而解。