JS ASYNC

Cuando se llama a una función async, esta devuelve un elemento Promise.

Cuando la función async devuelve un valor, Promise se resolverá con el valor
devuelto. Si la función async genera una excepción o algún valor, Promise se
rechazará con el valor generado.

Una función async puede contener una expresión await, la cual pausa la ejecución
de la función asíncrona y espera la resolución de la Promise pasada y, a
continuación, reanuda la ejecución de la función async y devuelve el valor resuelto.

La finalidad de las funciones async/await es simplificar el comportamiento del uso

síncrono de promesas y realizar algún comportamiento específico en un grupo
de Promises. Del mismo modo que las Promises son semejantes a las
devoluciones de llamadas estructuradas, async/await se asemejan a una
combinación de generadores y promesas.

Ejemplo

function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function add1(x) {
const a = await resolveAfter2Seconds(20);
const b = await resolveAfter2Seconds(30);return x + a + b;
}
add1(10).then(v => {
console.log(v); // prints 60 after 4 seconds.
});
async function add2(x) {
const p_a = resolveAfter2Seconds(20);
const p_b = resolveAfter2Seconds(30);
return x + await p_a + await p_b;
}
add2(10).then(v => {
console.log(v); // prints 60 after 2 seconds.
});
 JS CALLBACKS

Una función de callback es una función que se pasa a otra función como un
argumento, que luego se invoca dentro de la función externa para completar algún
tipo de rutina o acción.

Ejemplo:

function saludar(nombre) {
alert('Hola ' + nombre);
}
function procesarEntradaUsuario(callback) {
var nombre = prompt('Por favor ingresa tu nombre.');
callback(nombre);
}
procesarEntradaUsuario(saludar);

El ejemplo anterior es una callback sincrónica, ya que se ejecuta inmediatamente.

Sin embargo, tenga en cuenta que las callbacks a menudo se utilizan para
continuar con la ejecución del código después de que se haya
completado una operación a sincrónica — estas se denominan devoluciones de
llamada asincrónicas.

Como obtener las coordenadas del dispositivo de su GPS es asíncrono (no

sabemos exactamente cuándo se devolverán los datos), el
método Geolocation.getCurrentPosition() toma una función de devolución de
llamada anónima como parámetro, que a su vez toma los datos de coordenadas
devueltos como un parámetro. Esta función solo se ejecuta cuando se devuelven
los datos de coordenadas.
 JS ASYNCHRONOUS

La asincronía es uno de los pilares fundamentales de Javascript. El objetivo de

esta guía es profundizar en las piezas y elementos que la hacen posible. Teniendo
claro estos conceptos, podrás ponerlos en práctica en tu código y escribir mejores
aplicaciones.

La asincronía es uno de los pilares fundamentales de Javascript, ya que es un

lenguaje de programación de un sólo subproceso o hilo (single thread), lo que
significa que sólo puede ejecutar una cosa a la vez.

Si bien los idiomas de un sólo hilo simplifican la escritura de código porque no

tiene que preocuparse por los problemas de concurrencia, esto también significa
que no puede realizar operaciones largas como el acceso a la red sin bloquear el
hilo principal.

Imagina que solicitas datos de una API. Dependiendo de la situación, el servidor

puede tardar un tiempo en procesar la solicitud mientras bloquea el hilo principal y
hace que la página web no responda.

Ahí es donde entra en juego la asincronía que permite realizar largas solicitudes
de red sin bloquear el hilo principal.

JavaScript fue diseñado para ser ejecutado en navegadores, trabajar con

peticiones sobre la red y procesar las interacciones de usuario, al tiempo que
mantiene una interfaz fluida.

JS PROMISE

El objeto Promise es usado para computaciones asíncronas. Una promesa

representa un valor que puede estar disponible ahora, en el futuro, o nunca.

Una Promesa es un proxy para un valor no necesariamente conocido en el

momento que es creada la promesa. Permite asociar manejadores que actuarán
asincrónicamente sobre un eventual valor en caso de éxito, o la razón de falla en
caso de una falla. Esto permite que métodos asíncronos devuelvan valores como si
fueran síncronos: en vez de inmediatamente retornar el valor final, el método
asíncrono devuelve una promesa de suministrar el valor en algún momento en el
futuro.

Una Promesa se encuentra en uno de los siguientes estados:

  pendiente (pending): estado inicial, no cumplida o rechazada.
 cumplida (fulfilled): significa que la operación se completó
satisfactoriamente.
 rechazada (rejected): significa que la operación falló.

Una promesa pendiente puede ser cumplida con un valor, o rechazada con una
razón (error). Cuando cualquiera de estas dos opciones sucede, los métodos
asociados, encolados por el método then de la promesa, son llamados. (Si la
promesa ya ha sido cumplida o rechazada en el momento que es anexado su
correspondiente manejador, el manejador será llamado, de tal manera que no
exista una condición de carrera entre la operación asíncrona siendo completada y
los manejadores siendo anexados)

JS ASYNC/AWAIT

Hay dos partes a la hora de usar async/await en su código. Primero tenemos la

palabra clave "async", que se coloca delante de la declaración de una función, para
convertirla en función "async"(asíncrona). Una función "async", es una función que
sabe cómo esperar la posibilidad de que la palabra clave "await" sea utilizada para
invocar código asíncrono.

La palabra clave async se añade a las funciones para decirles que devuelvan una
promesa en lugar de devolver directamente el valor. Adicionamente, esto permite
que las funciones síncronas eviten cualquier potencial sobrecarga que viene con
correr con el soporte por usar async. Cuando una función es declarada async con
sólo añadir la manipulación necesaria, el motor de JavaScript puede optimizar su
programa por usted.

La ventaja real de las funciones asincronas aparecen cuando las combinas con la
palabra clave await — en efecto, await solo trabaja dentro de las
funciones async. Esta puede ser puesta frente a cualquier funcion async basada
en una promesa para pausar tu codigo en esa linea hasta que se cumpla la
promesa, entonces retorna el valor resultante. Mientras tanto, otro código que
puede estar esperando una oportunidad para ejecutarse, puede hacerlo.

Puedes usar await cuando llames cualquier función que retorna una Promesa,
incluyendo funciones web API.
async function showAvatar() {

// read our JSON

let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

// read github user

let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
let githubUser = await githubResponse.json();

// show the avatar

let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img);
// wait 3 seconds
await new Promise((resolve, reject) => setTimeout(resolve, 3000));
img.remove();
return githubUser;
}showAvatar();