Diferència entre revisions de la pàgina «Promises»
Salta a la navegació
Salta a la cerca
Línia 85: | Línia 85: | ||
findData(); | findData(); | ||
</pre> | </pre> | ||
+ | </li> | ||
+ | <li> | ||
+ | Modify the previous exercise to display in addition to the name of the country and its flag, the name and flag of the neighboring countries. Hint: Promises.all() | ||
+ | <!--const buscarPais = async (alpha3Code) => { | ||
+ | try { | ||
+ | const res = await fetch( | ||
+ | `https://restcountries.eu/rest/v2/alpha/${alpha3Code}` | ||
+ | ); | ||
+ | |||
+ | const data = await res.json(); | ||
+ | |||
+ | return data; | ||
+ | } catch (error) { | ||
+ | console.log(error); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | const buscarPaisYVecinos = async () => { | ||
+ | const colombia = await buscarPais("col"); | ||
+ | |||
+ | const vecinos = await Promise.all( | ||
+ | colombia.borders.map((border) => buscarPais(border)) | ||
+ | ); | ||
+ | |||
+ | console.log(vecinos); | ||
+ | }; | ||
+ | |||
+ | buscarPaisYVecinos();--> | ||
</li> | </li> | ||
</ol> | </ol> |
Revisió del 15:32, 14 març 2023
volver a M06 Desarrollo web en entorno cliente
Resources
Exercises
- Create a form with 2 fields a user name and a email. Create a function (with promises) to validate the form and submit the form if it is correct.
- Make a web page with a button (button text: Load image), when we click on that button you have use "promises" to load an image from your server and catch the errors, if there are
- With the given code, create a web page that call a server with some data (it's doesn't matter what data) and print the data on the page applying some kind of format.
const loadJSON = (file) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', file, true); xhr.responseType = 'json'; xhr.onload = () => { if (xhr.status === 200) { resolve(xhr.response); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send(); }); };
-
Using the given code and this api ( https://restcountries.com/ ), create a web application that asks user to enter a capital form some country and displays the name of the country and its flag
const findData = async () => { const res = await fetch("API URL"); const country = await res.json(); }; findData();
- Modify the previous exercise to display in addition to the name of the country and its flag, the name and flag of the neighboring countries. Hint: Promises.all()