Question

我有一个小问题..我依赖于2个服务，我循环所有组织，并且对于每个组织，我循环连接到组织的系统，将每个系统推送到对象。这很好用，这里没问题......当我创建我的地图时出现了问题，因为此时，this.systemList对象是空的......所以我只想在完成后调用我的createMap（）函数将所有项添加到数组（this.systemList）

所以不知怎的，我想检查所有组织和所有系统是否已完成循环，并且所有系统都已添加到：this.systemList数组，并首先调用this.createMap()

希望它有意义吗？

点击此处的代码：

methods: {
    getSystemsForOrganization(orgId) {
        SystemService.getSystemsForOrganization(orgId).then((response) => {
            let systems = response.data.systems;
            let systemPromises = [];
            if(systems) {
                systems.forEach((system, index, array) => {
                    let systemHasAlarms = !!system.pending_events;

                    let systemObject = {
                        id: system.id,
                        name: system.name,
                        latitude: system.latitude,
                        longitude: system.longitude,
                        latlng: [system.latitude, system.longitude],
                        has_alarms: systemHasAlarms
                    };
                    this.systemList.push(systemObject);
                });
            }
        });
    },
    getCurrentOrganizations() {
        OrganizationService.getOrganizationData().then((response) => {
            let organizations = response.data.organizations;

            let organizationsIds = organizations.map((org) => {
                return org.id;
            });

            organizationsIds.forEach((id, index, array) => {
                this.getSystemsForOrganization(id);
            });
        });

    },
},
mounted() {
    this.getCurrentOrganizations();
    this.createMap();
}

Answer 1

代码中的注释应该是自我解释的

您的主要问题是没有返回承诺等待

methods: {
    getSystemsForOrganization(orgId) {
        // added "return" to return the promise so you can wait on it
        return SystemService.getSystemsForOrganization(orgId).then((response) => {
            let systems = response.data.systems;
            let systemPromises = [];
            if(systems) {
                systems.forEach((system, index, array) => {
                    let systemHasAlarms = !!system.pending_events;

                    let systemObject = {
                        id: system.id,
                        name: system.name,
                        latitude: system.latitude,
                        longitude: system.longitude,
                        latlng: [system.latitude, system.longitude],
                        has_alarms: systemHasAlarms
                    };
                    this.systemList.push(systemObject);
                });
            }
        });
    },
    getCurrentOrganizations() {
        // return the promise
        return OrganizationService.getOrganizationData().then((response) => {
            let organizations = response.data.organizations;

            let organizationsIds = organizations.map((org) => {
                return org.id;
            });
            // instead of organizationsIds.forEach, use organizationsIds.map, so we
            // have an array of promises for Promise.all to wait on
            let promises = organizationsIds.map(id => {
                return this.getSystemsForOrganization(id);
            });
            // returns a Promise that "waits" for all promises to resolve
            return Promise.all(promises);
        });

    },
},
mounted() {
    this.getCurrentOrganizations().then(() => {
        this.createMap();
    });
}

代码也可以简化＆＃34;到

methods: {
    getSystemsForOrganization(orgId) {
        // added "return" to return the promise so you can wait on it
        return SystemService.getSystemsForOrganization(orgId).then(({data}) => 
            this.systemList.push(
                ...(data.systems||[])
                .map(({id, name, latitude, longitude, pending_events})=> ({
                    id,
                    name,
                    latitude,
                    longitude,
                    latlng: [latitude, longitude],
                    has_alarms: !!pending_events
                }))
            )
        );
    },
    getCurrentOrganizations() {
        return OrganizationService.getOrganizationData()
        .then(response => 
            Promise.all(response.data.organizations
                .map(({id}) => this.getSystemsForOrganization(id))
            )
        );
    },
},
mounted() {
    this.getCurrentOrganizations().then(this.createMap);
}

我如何使用promises来填充对象？

希望它有意义吗？

1 个答案: