Day 26: Making a PokeDex

Lesson 4: PokeDex 4

Our initial loading card is still there spinning away, but how can we get rid of it?

The way our code is structured at the moment make this surprisingly difficult. The obvious place would be in a .finally() at the end of the first fetch() request, however this completes before the promises in our for ... of loop so that's not ideal.

What we want to do is batch up the for ... of work so that we know when it ends.

We can do this with something called Promise.all() which takes an array of Promises and then returns us a single promise.

Please delete this from your code:

1for (let pokemon of fetchedPokemon) {
2  fetch(pokemon.url)
3    .then((res) => res.json())
4    .then((data) => {
5      console.log(data);
6      addCard(data);
7    });
8}

First up we need to create an array of Promises. fetch() returns a Promise so we can just call that for every url we want to call and save the returns in an array, like this:

1const requests = fetchedPokemon.map((pokemon) => {
2  return fetch(pokemon.url)
3    .then((res) => res.json())
4    .then((data) => {
5      addCard(data);
6    });
7});

I've used a map here because we want to call fetch on each Pokemon's URL and then save the return of fetch() into an array.

So requests isn't an array of the data we got back for each Pokemon, it's an array of Promises.

To know when to remove the loading placeholder we then add this line:

1return Promise.all(requests);

and then add:

1.finally(() => {
2  placeholder.classList.add("hidden");
3});

To clear up our UI.

Your final code should look like this:

1const getPokemonList = () => {
2  console.time("timer");
3  fetch(`${baseAPI}pokemon?limit=20&offset=0`)
4    .then((res) => res.json())
5    .then((data) => {
6      const fetchedPokemon = data.results;
7
8      const requests = fetchedPokemon.map((pokemon) => {
9        return fetch(pokemon.url)
10          .then((res) => res.json())
11          .then((data) => {
12            addCard(data);
13          });
14      });
15
16      return Promise.all(requests);
17    })
18    .finally(() => {
19      placeholder.classList.add("hidden");
20    });
21};

There are improvements that we can make to this code, mainly for readability, but then we add in some other complexities that for this tutorial aren't worth muddying the waters with.