美文网首页
前端一次性获取全部数据,并发获取,并优化

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

作者: 白小纯kl | 来源:发表于2021-11-08 11:45 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:前端一次性获取全部数据,并发获取,并优化

          本文链接:https://www.haomeiwen.com/subject/jdeuzltx.html