Diferència entre revisions de la pàgina «Async Await»

De Wiket
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/js_promise.asp Javascript Promises]
+
[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 promises) to validate the form and submit the form if it is correct.
+
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 "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 "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();
 
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>
 
</pre>
 
</li>
 
</li>

Revisió de 15:59, 14 març 2023

volver a M06 Desarrollo web en entorno cliente

Resources

Javascript Async await

Exercises

  1. 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.
  2. 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
  3. 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();
      });
    };
    
    
  4. 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();
    
  5. 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()