diff options
-rw-r--r-- | contenidos.md | 102 |
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 |