How to escape this callback hell

Question

I'm currently trying to fetch data from public API about a country and its neighboring countries to render on my html.
renderCountry( ) is a function to implement on my html with the data I will receive.
I also excluded some unnecessary codes, which I believe is not major in this particular case.

This is how I fetch data:

const getCountryAndNeighbour = function(country) {
    fetch(`https://restcountries.com/v2/name/${country}`)
        .then(response => response.json())
        .then(data => {
            renderCountry(data[0]);
            const neighbour = data[0].borders;    
            neighbour.forEach(country => {
                fetch(`https://restcountries.com/v2/alpha/${country}`)
                .then(response => response.json())
                .then(data => renderCountry(data, `neighbour`))
            });
        })
}

Here, you will see callback hell architecture. Any idea for escape from that? Thanks in advance.

Whatever you do, `forEach` doesn't work with promises. Fix that first. — Bergi, Jan 19 '22 at 20:41
I wouldn't call this callback hell. You already use promise chaining just fine, and have only two levels of `.then` callbacks - the nesting is necessary and unavoidable because of the loop — Bergi, Jan 19 '22 at 20:43

K.K Designs · Answer 1 · 2022-01-20T01:25:55.367

1

You can try using async/await. You would add async before the function keyword and add await as needed. See below to see this in action:

const getCountryAndNeighbour = async function (country) {
    const res = await fetch(`https://restcountries.com/v2/name/${country}`)
    const data = await res.json();

    renderCountry(data[0]);
    const neighbour = data[0].borders;
    await Promise.all(
        neighbour.map(async country => {
            let response = await fetch(`https://restcountries.com/v2/alpha/${country}`)
            response = await response.json();
            return renderCountry(response, 'neighbour');
        });
    );
}

edited Jan 20 '22 at 01:25

answered Jan 19 '22 at 20:39

K.K Designs

688
1
6
22

1

You [cannot use `forEach` for asynchronous code](https://stackoverflow.com/a/37576787/1048572). – Bergi Jan 19 '22 at 20:41
I changed it to the `map()` function. – K.K Designs Jan 19 '22 at 20:43
1

That alone won't suffice – Bergi Jan 19 '22 at 20:44
Would you do this then? – K.K Designs Jan 19 '22 at 20:45
I'd add the `await Promise.all(…)` around it – Bergi Jan 19 '22 at 20:49
So like this? ```Promise.all(neighbour).then(async(country) => { let response = await fetch(`https://restcountries.com/v2/alpha/${country}`) response = await response.json(); return renderCountry(response, 'neighbour'); });``` – K.K Designs Jan 19 '22 at 21:12
No, `await Promise.all(neighbour.map(async country => {…}));`. See also the link in my first comment. – Bergi Jan 19 '22 at 21:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241230/discussion-between-k-k-desgins-and-bergi). – K.K Designs Jan 20 '22 at 01:26
1

Ok, done! It's added to the answer. – K.K Designs Jan 20 '22 at 01:27

score 0 · Accepted Answer · answered Jan 19 '22 at 20:37

0

You can rewrite it using async/await

eg.

const getCountryAndNeighbour = async country => {
  const response = await fetch(`https://restcountries.com/v2/name/${country}`);
  const data = await response.json();

  renderCountry(data[0]);

  const neighbour = data[0].borders;
  neighbour.forEach(async country => {
    const response = await fetch(`https://restcountries.com/v2/alpha/${country}`)
    const data = await response.json();

    renderCountry(data, `neighbour`);
  });
};

Please note that forEach will run all promises in the same time.

If you want to run one by one you should use eg. for loop or some util like Bluebird.map which allows you to specify a concurrency

Good luck!

answered Jan 19 '22 at 20:37

Hakier

505
2
13

You [cannot use `forEach` for asynchronous code](https://stackoverflow.com/a/37576787/1048572). – Bergi Jan 19 '22 at 20:41
@Bergi I did write "Please note that forEach will run all promises in the same time." – Hakier Jan 19 '22 at 20:42
Yes, and that's why it should be avoided. Even if you don't need to wait for anything since there is currently no code after the `forEach()`, it's a footgun waiting to be fired. – Bergi Jan 19 '22 at 20:45
I know. I gave a starting point and wrote that he can use a for loop or Bluebird.map for making it better. I didn't want to give a whole fish but encourage him for using a fishing rod – Hakier Jan 19 '22 at 20:49

score 0 · Answer 3 · answered Jan 19 '22 at 21:29

This will do using Async/await

async function getCountryData(country) {
    const response = await fetch(`https://restcountries.com/v2/name/${country}`);
    return await response.json();
}

async function getNeighbourData(country) {
    const response = await fetch(`https://restcountries.com/v2/alpha/${country}`);
    return await response.json();
}

async function getCountryAndNeighbour(country) {
    const data = await getCountryData(country);
    const neighbourCountries = data[1].borders;

    for (const neighbour of neighbourCountries) {
        const response = await getNeighbourData(neighbour);
        console.log(response);
    }
}

Add the necessary validations when checking [0]/[1] in your function.

How to escape this callback hell

3 Answers3