Añadir asincronía

1 files changed, 102 insertions, 0 deletions

diff --git a/contenidos.md b/contenidos.md
index abf2dcc..43ee81e 100644
--- a/contenidos.md
+++ b/contenidos.md
@@ -492,3 +492,105 @@ Desde JavaScript, convertir JSON a un objeto y viceversa es trivial:
 JSON.parse( texto_json )  // Devuelve un objeto obtenido desde el JSON
 JSON.stringify( objeto )  // Devuelve un string JSON con el contenido del objeto
 ```
+
+## Asincronía
+
+El entorno de ejecución de JavaScript (*Runtime*) está diseñado de forma
+asíncrona, alrededor de un bucle de eventos (*Event Loop*). La mayor parte de
+las operaciones que requieren algún tipo de espera se procesan en un segundo
+plano por parte del runtime y cuando se resuelven son encoladas para que el
+programa las procese más tarde.
+
+Los procesos encolados sólo se resuelven cuando la pila de ejecución está
+vacía, por lo que es importante liberar la ejecución lo antes posible y
+permitir así que el runtime pueda realizar su trabajo.
+
+Este sistema es muy característico de JavaScript y debe conocerse en detalle.
+Para más información, visitar [la documentación de MDN][event-loop] o ver [la
+famosísima charla de Philip Roberts][charla-jsconf].
+
+[event-loop]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
+[charla-jsconf]: https://www.youtube.com/watch?v=8aGhZQkoFbQ
+
+### Promesas
+
+Las promesas son un sistema elegante para resolver los casos de ejecución de
+código asíncrono evitando concatenar muchos *callbacks*.
+
+Las promesas son objetos con dos campos principales. Uno que almacena su estado
+y otro que almacena su valor, en caso de que el estado sea el adecuado.
+
+El estado de una promesa puede tener uno de estos tres valores:
+
+- `"pending"` para representar que la promesa no se ha resuelto aún
+- `"fulfilled"` para representar que la promesa ha sido resuelta correctamente
+  y por tanto ya tiene un valor disponible
+- `"rejected"` para representar que ha ocurrido un error en la resolución de la
+  promesa y no ha podido resolverse
+
+Las promesas aportan dos métodos principales, para gestionar el código
+asíncrono:
+
+- `then( funcion )` la función enviada se ejecutará cuando la promesa se
+  resuelva, recibiendo como argumento el valor de la promesa. Si la función
+  enviada retorna un valor, éste se envolverá en una promesa nueva para poder
+  resolverla con un `then` concatenado
+- `catch( función )` la función enviada se ejecutará cuando la promesa falle
+  con alguna excepción
+
+Las llamadas a `then` pueden concatenarse para realizar operaciones de forma
+secuencial (este es el interés principal de las promesas):
+
+``` javascript
+function obtenerDitto(){
+  fetch("https://pokeapi.co/api/v2/pokemon/ditto")  // fetch retorna una promesa
+  .then((r)=>r.json())  // Procesa la respuesta como JSON, y retorna otra promesa
+  .then((data)=>console.log(data))  // Recibe los datos ya procesados
+  .catch( procesarError )  // Captura cualquier error ocurrido en el proceso
+}
+```
+
+#### `async` y `await`
+
+Las palabras reservadas `async` y `await` son azúcar sintáctico (*syntactic
+sugar*) sobre el sistema de promesas. Definir una función como `async` permite
+realizar la operación `await` dentro de ésta, permitiendo tratar código
+asíncrono de forma similar al código síncrono.
+
+El ejemplo anterior traducido a esta sintaxis:
+
+``` javascript
+async function obtenerDitto(){
+  try {
+    let respuesta = await fetch("https://pokeapi.co/api/v2/pokemon/ditto");
+    let data = await respuesta.json();
+    console.log(data);
+  } catch( err ) {
+    procesarError(err);
+  }
+}
+```
+
+
+## Web APIs
+
+Las Web APIs del navegador aportan a JavaScript infinidad de funcionalidades
+que le permiten operar con éste.
+
+> NOTA: en el lado del servidor la mayoría de las Web APIs no están
+> disponibles, pero hay otras que realizan tareas más relacionadas con el lado
+> del servidor: acceso al sistema de archivos, sockets, etc.
+
+> TODO:
+> - Asíncronía. Promesas (+async/await) y Workers.
+> - Web APIs:
+>     - DOM
+>     - Canvas
+>     - fetch
+>     - Sistema de Eventos
+>     - ...
+
+## Resumen
+
+El JavaScript aquí mencionado cubre casi todo el uso básico. La [guía
+profunda][js-deep] explica todo en mucho más detalle y añade más información