He estado estudiando funciones de promesas, espera y asíncronas. Mientras estaba en la etapa de aprendizaje de promesas, me di cuenta de lo siguiente: cuando enviaba dos solicitudes, no había garantía de que vendrían en el orden en que están escritas en el código. Por supuesto, con enrutamiento y paquetes de una red. Cuando ejecuté el siguiente código, las solicitudes se resolverían sin un orden específico.
const getCountry = async country => { await fetch(`https://restcountries.com/v2/name/${country}`) .then(res => res.json()) .then(data => { console.log(data[0]); }) .catch(err => err.message); }; getCountry('portugal'); getCountry('ecuador');En este punto, no había aprendido sobre async y await. Entonces, el siguiente código funciona exactamente como lo quiero. Cada solicitud, espera hasta que la otra esté lista.
¿Es esta la forma más sencilla de hacerlo? ¿Hay redundancias que podría eliminar? No necesito un montón de ejemplos alternativos; a menos que esté haciendo algo mal.
await fetch(`https://restcountries.com/v2/name/${country}`) .then(res => res.json()) .then(data => { console.log(data[0]); }) .catch(err => err.message); }; const getCountryData = async function () { await getCountry('portugal'); await getCountry('ecuador'); }; getCountryData();Gracias por adelantado,
Sí, esa es la forma correcta de hacerlo. Sin embargo, tenga en cuenta que está bloqueando cada solicitud para que se ejecuten una a la vez, causando ineficiencia. Como mencioné, la belleza de JavaScript es su asincronismo, así que aprovéchalo. Puede ejecutar todas las solicitudes casi al mismo tiempo, lo que hace que sus solicitudes se aceleren drásticamente. Toma este ejemplo:
// get results... const getCountry = async country => { const res = await fetch(`https://restcountries.com/v2/name/${country}`); const json = res.json(); return json; }; const getCountryData = async countries => { const proms = countries.map(getCountry); // create an array of promises const res = await Promise.all(proms); // wait for all promises to complete // get the first value from the returned array return res.map(r => r[0]); }; // demo: getCountryData(['portugal', 'ecuador']).then(console.log); // it orders by the countries you ordered getCountryData(['ecuador', 'portugal']).then(console.log); // get lots of countries with speed getCountryData(['mexico', 'china', 'france', 'germany', 'ecaudor']).then(console.log); Editar: Me acabo de dar cuenta de que Promise.all ordena automáticamente las promesas por usted, por lo que no es necesario agregar una función de clasificación adicional. Aquí está el tipo fn de todos modos como referencia si toma un enfoque diferente:
myArr.sort((a, b) => (countries.indexOf(a.name.toLowerCase()) > countries.indexOf(b.name.toLowerCase())) ? 1 : (countries.indexOf(a.name.toLowerCase()) < countries.indexOf(b.name.toLowerCase()))) ? -1 : 0 );Lo probé de la manera recomendada por @deceze y funciona bien: eliminé todos los .then y los reemplacé con await . Mucho más limpio de esta manera. Ahora puedo usar bloques normales de prueba y captura.
// GET COUNTRIES IN ORDER const getCountry = async country => { try { const status = await fetch(`https://restcountries.com/v2/name/${country}`); const data = await status.json(); renderCountry(data[0]); // Data is here. Now Render HTML } catch (err) { console.log(err.name, err.message); } }; const getCountryData = async function () { await getCountry('portugal'); await getCountry('Ecuador'); }; btn.addEventListener('click', function () { getCountryData(); });Gracias a todos.