Diferència entre revisions de la pàgina «Promises»
Salta a la navegació
Salta a la cerca
| (Hi ha 6 revisions intermèdies del mateix usuari que no es mostren) | |||
| Línia 2: | Línia 2: | ||
=Resources= | =Resources= | ||
[https://www.w3schools.com/js/js_promise.asp Javascript Promises] | [https://www.w3schools.com/js/js_promise.asp Javascript Promises] | ||
| + | |||
=Exercises= | =Exercises= | ||
<ol> | <ol> | ||
| + | <li> | ||
| + | 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. | ||
| + | <!-- function validateForm(formData) { | ||
| + | return new Promise(function(resolve, reject) { | ||
| + | if (formData.username.length < 3) { | ||
| + | reject(new Error("Username must be at least 3 characters")); | ||
| + | } else if (!formData.email.includes("@")) { | ||
| + | reject(new Error("Invalid email address")); | ||
| + | } else { | ||
| + | resolve(); | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | var formData = { | ||
| + | username: "johndoe", | ||
| + | email: "[email protected]" | ||
| + | }; | ||
| + | |||
| + | validateForm(formData) | ||
| + | .then(function() { | ||
| + | submitForm(formData); | ||
| + | }) | ||
| + | .catch(function(error) { | ||
| + | showError(error.message); | ||
| + | }); | ||
| + | --> | ||
| + | </li> | ||
<li>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 | <li>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 | ||
<!-- function loadImage(url) { | <!-- function loadImage(url) { | ||
| Línia 46: | Línia 75: | ||
</pre> | </pre> | ||
| + | </li> | ||
| + | <li> | ||
| + | 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 | ||
| + | <pre class="prettyprint"> | ||
| + | findData = new Promise(function (myResolve,myReject) { | ||
| + | |||
| + | res = fetch("API URL") | ||
| + | if(res){ | ||
| + | myResolve(res) | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | findData.then( | ||
| + | function (value) { | ||
| + | //console.log(value.json()) | ||
| + | return value.json() | ||
| + | } | ||
| + | ).then(res =>{ | ||
| + | console.log(res[0].name.common) | ||
| + | }); | ||
| + | </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ó de 15:59, 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
findData = new Promise(function (myResolve,myReject) { res = fetch("API URL") if(res){ myResolve(res) } }); findData.then( function (value) { //console.log(value.json()) return value.json() } ).then(res =>{ console.log(res[0].name.common) }); - 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()