Async await with Fetch

Question

my fetch works perfectly with .then, but i want to step it up a notch by using async and await. It should wait for all 5 API calls, and then place the answer, instead, it shows answer on every API call

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>`;
    });
}

Have alook at the [answer to this question](https://stackoverflow.com/questions/45285129/any-difference-between-await-promise-all-and-multiple-await) - it will give you some insights how to work out multiple awaits.. — iLuvLogix, Jun 27 '22 at 13:16
Can u share your version with `.then` too? Looks like the issue is not related with async/await but the code itself — Toni Bardina Comas, Jun 27 '22 at 13:17
Show the .then code version. So we can tell you what you're doing wrong — Bravo, Jun 27 '22 at 13:17
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all — Jared Smith, Jun 27 '22 at 13:21
The code in your `async` function (the parts after the `fetch`!) is ostensibly very different from the one in your `then` handler. It's not clear why you expected them to have the same result? — Bergi, Jun 27 '22 at 13:22

JeanJacquesGourdin · Answer 1 · 2023-08-10T07:20:54.550

You should use a concurrent way of fetching like Promise.all to avoid round-trips

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())
  )
  console.log(results)
  return results
}

getPhotosFromAPI()

score 1 · Answer 2 · answered Jun 27 '22 at 13:25

You're asking for the code to wait until each fetch finishes by using await on fetch's return value (then again on the return value of json) in your loop. So it will do just that: wait until that request is complete before moving on to the next loop iteration.

If you don't want to do that, you need to start each fetch one after another and then wait for them all to complete. I'd probably break out the work for just one of them into a function, then call it five times, building an array of the promises it returns, then await Promise.all(/*...*/) those promises, something along these lines:

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

(I took the version with .then as my starting point for the above, since the two versions in your question were so different and you said the one with .then worked... Also note that I renamed the variable json to data, since it doesn't contain JSON [it's not a string], it contains the result of parsing JSON.)

Yeah, it may not be exactly correct, but the idea is to point you in the right direction. (I'm surprised though, I think this is a pretty accurate translation of what you had that you said worked...) — T.J. Crowder, Jun 27 '22 at 13:43

Async await with Fetch

2 Answers2