js处理浏览器并发请求数量的优化

2023-12-05  本文已影响0人  甘道夫老矣

假如循环调用接口,但是后端就不给你一个接口
一个方法是循环,一个是通过Promise.all实现

  async initFileData(): Promise<any> {
        try {
            var start = new Date().getTime()

            const res: any = await this.https.get(this.modulerPath + '/qygbFile/getFjflFz?geometryId=' + this.tbBasicInfo.id);
            if (res) {
                let arr: any = [];
                for (let i = 0; i < res.length; i++) {
                    const item = res[i];
                    let obj = {
                        "geometeryId": this.tbBasicInfo.id,
                        "fjfl": item.fjfl,
                        "ssfz": []
                    };
                    let obj2 = {
                        fjfl: item.fjfl,
                        ssfz: [],
                        children: [],
                    };
                    let res2 = await this.https.post(this.modulerPath + '/qygbFile/listByFjflFjfzTbId', obj);
                    if (res2 && res2.length > 0) {
                        obj2.children = res2;
                    }
                    arr.push(obj2)
                }
                if (arr.length > 0) {
                    arr.forEach((item: any) => {
                        if (item.fjfl === '实地拍摄') {
                            this.allChecked = true;
                            if (item.ssfz.length > 0) {
                                let ssfz: any = [];
                                item.ssfz.forEach((elm: any) => {
                                    let obj = { label: elm, value: elm, checked: false };
                                    ssfz.push(obj);
                                })
                                this.checkOptionsOne = ssfz;
                            } else {
                                this.checkOptionsOne = [];
                            }
                            if (item.children.length > 0) {
                                this.filesImgList = item.children;
                                this.imgActive = this.filesImgList[0];
                            }
                        }
                        // TODO
                        if (item.fjfl === '附件材料') {

                        }
                    })
                }
                console.log(arr)
            }
            var end = new Date().getTime();
            console.log('方法1用时', `${end - start}ms`)
        } catch (error: any) {
            console.log(error)
            if (error.message) {
                this.msg.error(error.message)
            }
        }
    }

    async run2(): Promise<any> {
        try {
            var start = new Date().getTime()
            const res = await this.https.get(this.modulerPath + '/qygbFile/getFjflFz?geometryId=' + this.tbBasicInfo.id);
            if (res) {
                // 先构造obj2的数组集合
                let obj2List = res.map((item: any) => ({
                    fjfl: item.fjfl,
                    ssfz: [],
                    children: [],
                }))
                // 先构造obj1的请求
                let childrenList = await Promise.all(res.map((item: any) => {
                    return this.https.post(this.modulerPath + '/qygbFile/listByFjflFjfzTbId', {
                        "geometeryId": this.tbBasicInfo.id,
                        "fjfl": item.fjfl,
                        "ssfz": []
                    });
                }))
                // 找出childrenList和obj2List的关联
                let childrenListMap: any = {}
                for (let i = 0; i < res.length; i++) {
                    const item = res[i];
                    childrenListMap[item.fjfl] = childrenList[i]
                }
                obj2List.forEach((el: any) => {
                    el.children = childrenListMap[el.fjfl] || []
                });
                console.log(obj2List)
            }
            var end = new Date().getTime();
            console.log('方法2用时', `${end - start}ms`)
        } catch (error: any) {
            console.log(error)
            if (error.message) {
                this.msg.error(error.message)
            }
        }
    }
上一篇 下一篇

猜你喜欢

热点阅读