由于某些限制,三方后端服务一次性一页最多返回200条,由于某些原因,前端需要拿到所有数据做前端过滤等。
初次使用async await 实现顺序调用接口,速度较慢。
后续使用async await promise实现分组并发,优化数据获取速度。
let count = Math.ceil(res.data.total_records / 200); // 第一次获取接口后得知总数量,获取总共需调用次数
async getAllRemainDefect(firstData, count, params, init?) {
this.remainDefect = [].concat(firstData);
let num = 1;
while (count - 1 > 0) { // 后续请求次数
let promise = Array.from({length: count < 3 ? count : 3}, () => cloneDeep(params));
promise = promise.map(item => {
item.pagination.current_page = ++num; // 参数设置
return this.getAwaitDefect(item); // 返回参数相关 的promise实例请求
});
let result = await Promise.all(promise); // 并发
this.remainDefect = this.remainDefect.concat(...result); // 数据处理
count -= 3; // 分组并发,一组三个请求
}
// 数据处理
this.knownDefectLoading = false;
this.dealDefectData()
}
// 后续请求方法调用
getAwaitDefect(params) {
return new Promise((resolve, reject) => {
this.reportService.getReleasePlanIssueList(params, {}).subscribe(res => {
})
})
}
优化渲染及操作:后续对长列表做虚拟列表优化处理,或者前端切片分页处理。