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:

let myTimeout = setTimeout(myGreeting, 5_000);

function myGreeting() {
  console.log("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);

setTimeout()

Función que permite programar la ejecución de una acción.

La forma general es: let tId = setTimeout(accion, tiempo, arg1, arg2,...)

Donde:

• tId es el identificador de temporizador
• accion es la referencia a la función a ejecutar. Pasar accion y no accion()
• tiempo en milisegundos (detalle)
• arg1 primer argumento de la función (opcional)
• ...

Podemos cancelar un temporizador con clearTimeout(tId)

setInterval()

Programamos recursivamente la ejecución. Ideal para pequeños juegos.

El infierno de los callbacks

leer

NOTA: por este motivo NO emplearemos callbacks bajo ningún concepto en nuestro código.

Promesas

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

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

solicitud - respuesta

+ 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.

URL

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).