How to escape this callback hell

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.

Solution 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');
        });
    );
}