mi fetch funciona perfectamente con .then, pero quiero mejorar un poco usando async y await . Debe esperar las 5 llamadas API y luego colocar la respuesta; en su lugar, muestra la respuesta en cada llamada API
async function getPhotosFromAPI() { for (let i = 1; i <= 5; i++) { let albums = await fetch( `https://jsonplaceholder.typicode.com/photos/?albumId=${i}` ); let result = await albums.json(); let res = `<div class="album${i}"></div>`; document.querySelector(".display-images").innerHTML += res; for (let j = 1; j <= 5; j++) { document.querySelector( `.album${i}` ).innerHTML += `<img src="${result[j].url}"/>`; } } console.log(result); } async function showPhotos() { await getPhotosFromAPI(); document.getElementById("#loader").style.display = "none"; } showPhotos(); document.getElementById("img").style.display = "block"; for (let i = 1; i <= 5; i++) { fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${i}`) .then((response) => response.json()) .then((json) => { document.getElementById("img").style.display = "none"; const display = document.querySelector(".display-images"); const albumNo = document.querySelector(".album-no"); // document.getElementById('img').style.display = "block"; // document.getElementById('img').style.display = "none";] display.innerHTML += `<div class="album-${i}>`; for (let z = 1; z <= 5; z++) { display.innerHTML += `<img id="img" alt="pic-from-album${json[i].albumId}" src="${json[z].url}"/>`; } display.innerHTML += `<div>`; }); }Estás pidiendo que el código espere hasta que finalice cada fetch usando await en el valor de retorno de fetch (luego nuevamente en el valor de retorno de json ) en tu bucle. Así que hará exactamente eso: esperar hasta que se complete la solicitud antes de pasar a la siguiente iteración del bucle.
Si no desea hacer eso, debe iniciar cada fetch una tras otra y luego esperar a que se completen todas. Probablemente dividiría el trabajo de solo uno de ellos en una función, luego lo llamaría cinco veces, construiría una matriz de las promesas que devuelve, luego await Promise.all(/*...*/) esas promesas, algo a lo largo de estas líneas:
document.getElementById("img").style.display = "block"; // Fetch one item const fetchOne = async (i) => { const response = await fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${i}`); if (!response.ok) { throw new Error(`HTTP error ${response.status}`); } const data = await response.json(); document.getElementById("img").style.display = "none"; const display = document.querySelector(".display-images"); const albumNo = document.querySelector(".album-no"); // document.getElementById('img').style.display = "block"; // document.getElementById('img').style.display = "none";] display.innerHTML += `<div class="album-${i}>`; for (let z = 1; z <= 5; z++) { display.innerHTML += `<img id="img" alt="pic-from-album${data[i].albumId}" src="${data[z].url}"/>`; } display.innerHTML += `<div>`; }; // ... await Promise.all(Array.from({length: 5}, (_, i) => fetchOne(i + 1))); // All done (Tomé la versión con .then como mi punto de partida para lo anterior, ya que las dos versiones en su pregunta eran muy diferentes y usted dijo que la que tenía .then funcionó... También tenga en cuenta que cambié el nombre de la variable json a data , ya que no contiene JSON [no es una cadena], contiene el resultado de analizar JSON).
Debe usar una forma concurrente de obtener como Promise.all para evitar viajes de ida y vuelta
async function getPhotosFromAPI() { let albums = await Promise.all( Array(5).fill().map((elem, index) => fetch(`https://jsonplaceholder.typicode.com/photos/?albumId=${index+1}`) ) ) let results = await Promise.all( albums.map(album => album.json()) ) return results } //Display