Tengo una aplicación JS modular que usa clases externas. Se comunica con la API del lado del servidor y genera resultados apropiados. Para fines de aprendizaje, quiero que sea JS puro y simple sin marcos ni bibliotecas clave.

índice.js

 import Project from "./AppStructure/Models/Project.js"; let project; let projectAPI = await fetch(projectUrl).then(res => res.json()); function onUserCreate() { project = new Project(projectAPI); project.loadObject3Ds(); console.log(project); console.log(project.object3Ds); console.log(project.object3Ds[0]); project.object3Ds.forEach(function (object) { doSomething(object); }); function onUserUpdate() { requestAnimationFrame(onUserUpdate); renderSomething(); } onUserCreate(); onUserUpdate();

Proyecto.js

 export default class Project { constructor(project) { this.object3DsIds = project.object3DsIds; this.object3Ds = new Array(); } loadObject3Ds() { let object3Ds = new Array(); this.object3DsIds.forEach(async function (object3DId) { let object3D = new Object3D(); let objectUrl = 'https://localhost:44555/api/object3Ds/' + object3DId let object = await fetch(objectUrl).then(res => res.json()); object3D.id = object.id; object3Ds.push(object3D) }); this.object3Ds = object3Ds; } }

El problema ocurre cuando la aplicación está haciendo el ciclo forEach, simplemente no sucede nada. Parece que se inicializa antes de que los objetos 3D se envíen a la matriz project.object3Ds.

Cuando consuelo el proyecto de registro, parece estar completo, pero la matriz project.object3Ds es un poco rara (la vista previa es [], expandida está bien) y project.object3Ds[0] se registra como indefinido.

¿Por qué forEach loop no espera que el método loadObject3Ds() se ejecute primero? ¿Qué estoy haciendo mal? Gracias por ayudar.