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 then
lo 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()
porcargarDatosDePaginacion()
.
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,Event Driven Programming, Promises y async/await para JS. Aquì yaDependiendo del estilo, se manejan diferentes patrones de codificación de eventos async, donde puedes estructurar tu código de otra forma.