跳到主要内容
版本:v2

步骤4-数据补偿

用户可能在断网环境下进行了一些数据操作,此时静默队列内将堆满未提交的请求,当网络恢复后,由于时序机制的限制,完成这些请求需要消耗一点时间,此时加载的列表数据还不包括未提交请求的部分,这会让用户造成一定的困惑:

“我明明已经新增了多条数据,为什么列表中没有?”

因此我们需要将未提交的数据手动补偿到列表中,从而让列表数据始终保持最新状态,在这一步中将会使用到保存的操作记录,对列表数据进行数据补偿,它其实也很简单,我们只需要在列表请求成功后遍历相关队列的 silentMethod 实例,将上一步记录的操作记录更新到列表数据中。

import { useSQRequest, filterSilentMethods, equals } from '@alova/scene-vue';
import { todoList } from './api.js';
const { data, loading, onSuccess } = useSQRequest(todoList, {
initialData: []
});

onSuccess(() => {
// 获取default队列下的所有silentMethod实例
const silentMethods = filterSilentMethods();
silentMethods.forEach(({ reviewData }) => {
if (!reviewData) {
return;
}
const { operate, data } = reviewData;
const index = todoListData.findIndex(({ id }) => equals(id, data.id));
if ((operate === 'edit' || operate === 'remove') && index >= 0) {
operate === 'edit' ? todoListData.splice(index, 1, data) : todoListData.splice(index, 1);
} else if (operate === 'add' && index < 0) {
// 在重新请求并命中缓存时将会有已添加的未提交项,这些需要过滤
todoListData.unshift(data);
}
});
});

相关函数解释

filterSilentMethods

按 method 名称或正则表达式过滤出指定的 silentMethod 实例,它的定义如下:

function filterSilentMethods(
methodNameMatcher?: string | number | RegExp,
queueName?: string,
filterActive?: boolean
): SilentMethod[];

**methodNameMatcher:**method 名称匹配器,如果是数字或字符串将过滤出完全匹配名称的结果,如果是正则表达式则过滤出匹配的结果,如果不传则过滤出所有结果;

queueName:指定查找的队列,未传时默认查找default队列;

filterActive:是否过滤掉激活状态的实例