Skip to content

T5.12 Concurrencia

Para la ejecución asíncrona de código tenemos la evolución: 1. [callbacks] 12 2. [Promesas] 13 3. [await/async] 14

callbacks

Es la forma original de realizar la concurrencia. Un ejemplo clásico es:

const myTimeout = setTimeout(myGreeting, 5_000);

function myGreeting() {
  alert("Happy Birthday!");
}

La función myGreeting() actúa de callback de la función setTimeout(callback, time), esto es, myGreeting() será ejecutada cuando hayan pasado 5_000 ms.

Esa función callback a menudo se pasaba como una función anónima const myTimeout = setTimeout(function(){alert("Happy Birthday!");}, 1_000); si nadie más la va a necesitar, y en la actualidad casi siempre como una función lambda const myTimeout = setTimeout(()=>{alert("Happy Birthday!");}, 1_000);

Promesas

Una forma más legible de hacer ejecutar código asíncrono es mediante las funciones que devuelven promesas. lo anterior:

const getUrl = (url) => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch( error => console.log("Hubo un problema con la petición Fetch:", error.message));  
}; 

getUrl('ejemplo.com');

Nota: fetch devuelve un promesa y ésta es consumida con los métodos .then() y .catch()

await / async

No es más que azúcar sintáctico, por lo que lo dejaremos para el módulo de Desarrollo Web en Entorno Cliente.

Pese a ésto, algunos alumnos pueden entender mejor la programación secuencial por lo que ...:

getUrl = async (url) => {
  const respuesta = await fetch(url);
  if (respuesta.ok){
    console.log('Respuesta OK');
    const json = respuesta.json();
    console.log(json);       // => promesa aún no disponible
    console.log(await json); // => promesa resuelta => resultado deseado
  } else {
    console.error(`Algo falló. Error ${respuesta.status}`);
  }    
};

getUrl('ejemplo.com');

Protocolo http

http + Es un protocolo de solicitud/respuesta. + Un cliente realiza la solicitud de un recurso y obtine una respuesta que se compone de un código y a veces un recurso.

Códigos
  • 100: información.
  • 200: correcto.
  • 300: redirección.
  • 400: error en cliente. P.e. el 404 es no existe recurso
  • 500: error en servidor.

De forma más completa: + Status Codes + en vídeo + Cats Codes 🐈

Métodos
  • GET -> obtener
  • POST -> añadir
  • PUT -> modificar (todo el recurso)
  • PATCH -> modificar (parcialmente)
  • DELETE -> borrar
  • Otros... (no nos interesan para nuestro objeto de estudio).