Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Manteniendo las Promesas con JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Marina Cardone (you can also view the original English article)

JavaScript, a través de su popularidad y recientes mejoras, está convirtiéndose cada vez más en el mejor amigo del programador web. Y como todos los mejores amigos, JavaScript mantiene sus promesas.

Quizás eso suene un poco extraño, pero es verdad. La mayoría de los browsers actuales soportan lo que se llama objeto Promesa. Una promesa es como una función que representa una pieza de código o una tarea que quisieras que se ejecute en algún punto en el futuro.

Así es como luce una promesa.

Puedes ver aquí que cuando creamos una promesa obtenemos un solo argumento, que es una función conteniendo código que queremos que se ejecute en algún momento futuro. Quizás hayas notado también los dos argumentos en la función pasados a la promesa, resolve y reject. Estas también son funciones y son nuestra forma de decirle a la Promesa que ha hecho lo que prometió hacer. Así es como lo usamos:

Esta promesa obviamente siempre se va a resolver como si el if fuera siempre true. Esto es solo para propósitos educativos -vamos a hacer algo más realista más adelante- pero imagina reemplazar el true con un fragmento de código que no estás 100% seguro que va a funcionar.

Ahora que creamos una promesa, cómo la usamos? Bueno, necesitamos decirle qué son esas funciones resolve y reject. Hacemos eso utilizando el método then de las promesas.

Porque nuestra declaración siempre pasa el chequeo true, el código de abajo siempre va a mostrar "Hello Tuts+ fans!" en la consola. También lo hará inmediatamente. Esto es porque el código adentro de nuestro constructor de Promesa es sincrónico, lo que significa que no está esperando que se ejecute ninguna operación. Tiene toda la información que necesita para continuar y hace eso lo más pronto posible.

Donde brillan realmente las promesas, sin embargo, es cuando se trata de tareas asincrónicas -tareas donde no sabes exactamente cuándo la promesa se completará. Un ejemplo del mundo real de una tarea asincrónica es traer un recurso, como un archivo JSON por ejemplo, via AJAX. No sabemos cuanto va a tardar el servidor en responder, y tampoco si fallará. Agreguemos algo de AJAX al código de nuestra promesa.

El código es simplemente JavaScript estándar para ejecutar un request AJAX. Solicitamos un recurso, en este caso un archivo JSON en una url específica, y esperamos que responda. Nunca sabemos exactamente cuando. Y obviamente no queremos detener la ejecución de nuestro script para esperar por ello, entonces qué hacemos?

Bueno, afortunadamente pusimos este código adentro de una promesa. Al ponerlo ahí, básicamente estamos diciendo, "Hey pieza de código, me tengo que ir justo ahora pero te llamaré luego y te diré cuando te ejecutes. Me prometes que lo harás y me dirás cuando termines?" Y el código dirá, "Si, por supuesto. Lo prometo."

Una cosa importante para tener en cuenta en el código de abajo es la llamada a las funciones resolve y reject. Recuerda, estas son nuestras formas de decirle a la promesa que nuestro código se a ejecutado exitosamente o no. De otra manera, nunca lo sabríamos.

Usando el mismo código de nuestro ejemplo básico, podemos ver ahora cómo funcionará el request de AJAX dentro de la promesa.

Sabía que podía confiar en tí, myPromise.

Encadenando Promesas

Ahora, quizás estás pensando en este punto que las promesas son solo funciones callback más pretenciosas con una sintaxis más linda. Eso es verdad hasta cierto punto, pero para continuar con nuestro ejemplo AJAX, digamos que necesitas hacer algunos otros requests, cada request basado en el resultado del anterior. O qué si necesitas procesar el JSON primero?

Haciendo esto con callbacks puede terminar en un anidado de funciones pesado, cada una siendo cada vez más difícil de mantener el rastro. Afortunadamente, en el mundo de las promesas podemos encadenar esas funciones. Aquí hay un ejemplo donde una vez que recibimos el JSON para un comentario de usuario en nuestro blog falso, queremos asegurarnos que es todo lowercase antes de hacer cualquier otra cosa con él.

Puedes ver que mientras nuestra llamada inicial fue asincrónica, es posible encadenar llamadas sincrónicas también. El código en cada función resolve dentro del then será llamado cuando cada uno retorne. También notarás que hay solo una función de error especificada para toda la cadena. Ubicando esto al fin de la cadena como la función reject en el último then, cualquier promesa de la cadena que llame al reject llamará a este.

Ahora que estamos un poco más confiados con las promesas, vamos a crear otra en conjunción con la anterior. Vamos a crear una que tome nuestra nueva dirección de email en lowercas y vamos a (pretender) enviar un email a esa dirección. Esto es solo un ejemplo para ilustrar algo asincrónico -puede ser cualquier cosa, como contactar un servidor para ver si el email estaba en una lista blanca o si el usuario está logueado. Vamos a darle la dirección de email a una nueva promesa, pero las promesas no aceptan argumentos. El camino alrededor de esto es envolver la promesa en una función que lo haga, como:

Estamos usando la llamada setTimeout para simplemente falsear una tarea que tomará un par de segundos para correr asincrónicamente.

Entonces como usamos nuestra nueva función de crear promesas? Bueno, ya que cada función resolve es usada con un then debería retornar una función, luego podemos usarla en una forma similar a nuestras tareas sincrónicas.

Vamos a resumir el flujo de lo que está pasando. Nuestra promesa original myPromise solicita una pieza de JSON. Cuando ese JSON es recibido (no sabemos cuando), convertimos el JSON en un objeto JavaScript y retornamos ese valor.

Una vez que está hecho, tomamos la dirección de email del JSON y la hacemos lowercase. Luego enviamos un email a esa dirección, y nuevamente no sabemos cuando se completará, pero cuando lo haga mostraremos un mensaje de suceso en la consola. No hay anidamientos pesados a la vista.

Conclusión

Espero que esto haya sido una introducción útil a las Promesas, y te haya dado una buena razón para comenzar a utilizarlas en tus proyectos JavaScript. Si quieres aprender más sobre Promesas en mayor detalle, mira el excelente artículo en HTML5 Rocks de Jake Archibald sobre este asunto.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.