Tengo una aplicación create-react-app (CRA) que usa Node y React and Express.
Cuando el usuario inicie sesión, iniciará el contexto de reacción de esta manera:
initiateContext = async () => { const promises_1 = [ this.getBreakthrus(), //check done this.getBadges(), //check done this.getChapter(), //check done ] const promises_2 = [ this.getContext(), //check done this.getTeam(), //check done this.getTeams(), //check done this.getTeamData(), //check done this.getFacilitators(), //check done this.getNextQuestion(), //check done ] await Promise.all(promises_1) await Promise.all(promises_2); this.setLobbyView("profile") }
Estas funciones cargan todos los datos de la aplicación e inician la vista del lobby para el usuario.
El problema: cuando el usuario usa una conexión VPN, a veces los datos de contexto no se cargan. Sin embargo, la vista del lobby se carga, por lo que el usuario ve el lobby, pero todos los datos están vacíos.
¿Cómo puedo hacer que esta función sea más flexible para manejar fallas/reintentos de red?
Parece que su problema real es una condición de carrera. Su código debe ser:
initiateContext = async () => { await Promise.all([ this.getBreakthrus(), //check done this.getBadges(), //check done this.getChapter(), //check done ]); //this will now run AFTER the above await Promise.all([ this.getContext(), //check done this.getTeam(), //check done this.getTeams(), //check done this.getTeamData(), //check done this.getFacilitators(), //check done this.getNextQuestion(), //check done ]); this.setLobbyView("profile"); };
Además, los puntos y comas importan