前端一次性获取全部数据,并发获取,并优化

2021-11-08  本文已影响0人  白小纯kl

由于某些限制,三方后端服务一次性一页最多返回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 => {
                
            })
        })
    }

优化渲染及操作:后续对长列表做虚拟列表优化处理,或者前端切片分页处理。

上一篇下一篇

猜你喜欢

热点阅读