Diferència entre revisions de la pàgina «Async Await»
Salta a la navegació
Salta a la cerca
Línia 1: | Línia 1: | ||
'''volver a''' [[M06 Desarrollo web en entorno cliente]] | '''volver a''' [[M06 Desarrollo web en entorno cliente]] | ||
=Resources= | =Resources= | ||
− | [https://www.w3schools.com/js/ | + | [https://www.w3schools.com/js/js_async.asp Javascript Async await] |
=Exercises= | =Exercises= | ||
<ol> | <ol> | ||
<li> | <li> | ||
− | Create a form with 2 fields a user name and a email. Create a function (with | + | Create a form with 2 fields a user name and a email. Create a function (with Async await) to validate the form and submit the form if it is correct. |
<!-- function validateForm(formData) { | <!-- function validateForm(formData) { | ||
return new Promise(function(resolve, reject) { | return new Promise(function(resolve, reject) { | ||
Línia 33: | Línia 33: | ||
--> | --> | ||
</li> | </li> | ||
− | <li>Make a web page with a button (button text: Load image), when we click on that button you have use " | + | <li>Make a web page with a button (button text: Load image), when we click on that button you have use "async await" to load an image from your server and catch the errors, if there are |
<!-- function loadImage(url) { | <!-- function loadImage(url) { | ||
return new Promise(function(resolve, reject) { | return new Promise(function(resolve, reject) { | ||
Línia 55: | Línia 55: | ||
}); | }); | ||
--></li> | --></li> | ||
− | <li>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. | + | <li>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. Refactor this code with async await |
<pre class="prettyprint"> | <pre class="prettyprint"> | ||
const loadJSON = (file) => { | const loadJSON = (file) => { | ||
Línia 85: | Línia 85: | ||
findData(); | findData(); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
</li> | </li> |
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 Async await) 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 "async await" 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. Refactor this code with async await
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()