summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--contenidos.md102
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