Skip to main content
4 de 5
Mejoras en la redacción, ortografía
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, Async, Promises, para JS. Aquì ya 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