Tu error es bastante común. Todos los días llega algún usuario intentando devolver algo que no sea una promesa de una función asincrónica y esperando que su código asíncrono se ejecute de forma síncrona, y siempre los remito a lo que se ha convertido en casi una lectura obligatoria en stack overflow: https://es.stackoverflow.com/a/364745/186586
Te explico como funciona tu código actualmente:
- El navegador inicia la petición en
llamarAPI()
y procede a seguir ejecutando tu código en lo que la petición se resuelve.
- Llama a la función
cargarImagen();
y se encuentra con que el arreglo de imágenes está vacío. Por tanto termina la ejecución de la función.
- Luego resuelve la petición, pero no hace nada con los datos, porque no le has dicho que hacer con ellos una vez resueltos.
Ahora que estás empezando recuerda dos cosas MUY IMPORTANTES:
Una función asincrónica SIEMPRE devuelve una promesa.
Los datos de una petición debes consumirlos dentro del then
o bien desde una función async
. No puedes retornarlo como si fuera código sincrónico, porque se retornaran los datos envueltos en una promesa.
Repasa por favor los conceptos de asincronía en javascript y lee el enlace a la respuesta que te adjunté, es básicamente la respuesta a tu pregunta.
En cuanto a tu código, te lo adjunto adaptado para que funcione y puedes ejecutarlo desde acá. La idea es:
- Haces la petición a la api.
- Luego (
then
), cuando la petición esté lista, extraes las imágenes de lo que te llegó.
- Luego, cuando se hayan extraído las imágenes, insertas los elementos al
DOM
Nota que todo sigue una secuencia lógica, solo cuando una cosa se resuelva, ENTONCES (then
) se hace la otra.
let box = document.querySelector('#box');
async function llamarAPI() {
const response = await fetch('https://api.github.com/users');
const result = await response.json();
return result;
}
async function extraerImagenes(result){
let images = [];
for (const x of result) {
images.push(x.avatar_url);
}
return images
}
function cargarImagen(images) {
for (const i of images) {
const img = document.createElement('img');
img.setAttribute("width", "100");
img.setAttribute("height", "100");
img.setAttribute('src', i);
box.appendChild(img);
}
}
llamarAPI()
.then(extraerImagenes)
.then(cargarImagen)
<div id="box"></div>