Skip to main content
5 de 5
se añadieron 26 caracteres en el cuerpo
g.4
  • 3.5k
  • 2
  • 11
  • 22

Tu código esta bien estructurado y depurado, pero considera que fetch es asyncronous, esto es, que espera un evento de regreso, en este caso, la respuesta de la API.

Debido a las reglas de ejecución de JS, el programa llama primero a mostrarPersonasPaginacion(), pero fetch aún no regresa, por eso no se tienen los datos en ese momento (el console.log del enclosing scope lo demuestra).

Luego, fetch ya completó la operación async, regresa el resultado de una promesa y nos deja ver estos resultados, dentro de then. (el console.log del scope thenlo demuestra)

Lo más práctico en tu caso, es continuar con la ejecución de tu programa dentro del then donde está la respuesta, entonces puedes llamar primero a la función mostrarPersonasPaginacion().

Yo cambiaría el nombre de mostrarPersonasPaginacion() por cargarDatosDePaginacion().

Después, manejas la respuesta de la promesa dentro de la secuencia then, con otra función de continuación:

.then(lista_de_personas => {
        console.log(lista_de_personas);
         //ya regreso la respuesta, callback
        //aqui llamas tu funcion de continuacion
        //logica de paginacion
        continuationFn(lista_de_personas);
       
    }).catch(function (error) {
        console.log("¡Error!", error);
    })

La sugerencia es analizar a los conceptos de Event Driven Programming, Promises y async/await para JS. Dependiendo del estilo, se manejan diferentes patrones de codificación de eventos async, donde puedes estructurar tu código de otra forma.

Problemas con promesas asycn code Promesas async/await

g.4
  • 3.5k
  • 2
  • 11
  • 22