如何使用 Promise 填充对象？

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

代码中的 cmets 应该是不言自明的

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

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();
    });
}

代码也可以“简化”为

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);
}