Actualmente estoy tratando de obtener datos de la API pública sobre un país y sus países vecinos para representarlos en mi html.
renderCountry() es una función para implementar en mi html con los datos que recibiré.
También excluí algunos códigos innecesarios, que creo que no son importantes en este caso particular.
Así es como busco datos:
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`)) }); }) }Aquí, verá la arquitectura del infierno de devolución de llamada. ¿Alguna idea para escapar de eso? Gracias por adelantado.
Puedes intentar usar async / await . async antes de la palabra clave de función y agregaría esperar según sea necesario. Vea a continuación para ver esto en acción:
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'); }); ); }Esto funcionará usando 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); } }Agregue las validaciones necesarias al marcar [0]/[1] en su función.
Puedes reescribirlo usando async/await
p.ej.
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`); }); };Tenga en cuenta que forEach ejecutará todas las promesas al mismo tiempo.
Si desea ejecutar uno por uno, debe usar, por ejemplo. for loop o alguna utilidad como Bluebird.map que le permite especificar una concurrencia
¡Buena suerte!