Comprender las promesas de Javascript
En tu viaje para comprender el mundo de la informática, entender los entresijos del lenguaje Javascript, en concreto las Promesas Javascript, es un paso fundamental. Desarrolladas para manejar operaciones asíncronas en JavaScript, las Promesas son objetos que representan la finalización (o el fallo) de una operación asíncrona y su valor resultante.Qué es una Promesa en Javascript: Una visión general
Una Promesa en Javascript es un objeto que puede producir un valor único en el futuro. Ofrece una forma de manejar operaciones asíncronas, es decir, tareas que suelen llevar mucho tiempo, como cargar una imagen, obtener datos de un servidor, etc., que tardan en completarse y se ejecutan en segundo plano sin bloquear el hilo principal.
- pendiente: Estado inicial, ni cumplida ni rechazada.
- cumplida: La operación se ha completado con éxito.
- rechazada: La operación falló.
Cómo funcionan las promesas de Javascript
Es instructivo aprender cómo funcionan las Promesas de Javascript para explotar plenamente la potencia de la programación asíncrona. Un objeto Promesa comienza en estado pendiente. A continuación, se resuelve con un valor o se rechaza con un motivo. En estos momentos, se ejecutan las llamadas de retorno de la promesa. En esencia, una promesa de JavaScript se compone de dos funciones:Promise(ejecutor)El mencionado ejecutor es una función que toma dos parámetros: resolver y rechazar.
function(resolver, rechazar)La función resolver se utiliza para cambiar el estado de la Promesa de pendiente a cumplido, momento en el que se establece un valor resultante. La función reject, por su parte, cambia el estado de la Promesa de pendiente a rechazada y va acompañada de una razón del fallo.
He aquí una forma habitual de crear una nueva promesa en JavaScript:
let promise = new Promise(function(resolve, reject) { // ejecutor (el código productor) });Programación asíncrona con promesas en Javascript
La programación asíncrona es quizá una de las aplicaciones más potentes de las promesas de JavaScript. Mientras que el código JavaScript tradicional se ejecuta secuencialmente, de arriba abajo, el código asíncrono rompe este molde, permitiendo en ocasiones un rendimiento más eficiente.Esto es especialmente útil para operaciones que pueden llevar mucho tiempo, como obtener datos de un servidor o leer de un archivo. Un ejemplo común de programación asíncrona en JavaScript es el uso de funciones de devolución de llamada en las que no se conoce de antemano el orden de ejecución. Aquí brillan las Promesas, ya que proporcionan una solución más elegante y robusta para manejar estas tareas.
He aquí un ejemplo de encadenamiento:
let promise = new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); }) .then(result => { console.log(result); // 1 return result * 2; }) .then(result => { console.log(result); // 2 return result * 3; })Explorando los métodos Promise de Javascript
Para comprender plenamente el concepto y el uso de las promesas de JavaScript, es fundamental que te familiarices con los distintos métodos de promesa disponibles. Como funcionalidades incorporadas, estos métodos vienen con el objeto Promesa para simplificar el manejo de las operaciones asíncronas.Métodos Promise de Javascript más utilizados
El objeto Promesa incorporado de Javascript proporciona varios métodos que puedes utilizar para interactuar con promesas en varios estados. Profundicemos en los más utilizados: 1. .then(): Este método Promise se utiliza después de declarar un objeto Promise. Toma hasta dos argumentos: funciones de llamada de retorno para los casos de éxito y fracaso respectivamente.Cómo utilizarlo:
promise.then( function(resultado) { /* tratar resolución satisfactoria */ }, function(error) { /* tratar error */ } );Cómo utilizarlo:
promise.catch( function(error) { /* tratar error */ } );Cómo utilizarlo:
promise.finally( function() { /* código a ejecutar después de que se resuelva la Promesa */ } );Implementación de los métodos de promesas de Javascript en la programación
Para ejemplificar la implementación de los métodos Promise comentados en tu codificación de Javascript, vamos a recorrer algunos ejemplos ilustrativos. Considera un escenario en el que quieras cargar una imagen en una aplicación web. En tal caso, podrías utilizar el constructor Promesa para crear un nuevo objeto Promesa:Ejemplo:
let imgLoad = new Promise(function(resolve, reject) { let img = new Image(); img.src = 'ruta/a/imagen.jpg'; img.onload = function() { resolve(img); }; img.onerror = function() { reject('Error al cargar la imagen.'); }; });Continuando con el ejemplo anterior
imgLoad.then( function(img) { document.body.append(img); }, function(error) { console.log(error); } );Implementación de .catch()
imgLoad.then( function(img) { document.body.append(img); } ).catch(function(error) { console.log('Se ha producido un error.', error); });Ejemplos de promesas en JavaScript: Un recorrido guiado
Asimilar el concepto de Promesas de Javascript puede ser un reto cuando acabas de sumergirte en la exploración del lenguaje de programación. Es aquí donde los ejemplos de código pueden reforzar tu comprensión, ayudando a salvar la distancia entre la teoría y la práctica. En esta parte de nuestra guía, veremos un ejemplo sencillo para principiantes, y luego aumentaremos la complejidad para una lección más avanzada de Promesas en JavaScript.Ejemplo sencillo de Promesa Javascript para principiantes
En esta sección, vamos a analizar un ejemplo fácil de digerir, adecuado para quienes se sumergen por primera vez en las Promesas de Javascript. Nuestro fragmento de código simula una función que determina si un usuario tiene suficiente dinero para comprar un artículo deseado. A continuación se muestra el código para su estudio:let hasEnoughMoney = new Promise(function(resolve, reject) { let money = 500; // El usuario tiene 500 £ let price = 400; // El artículo cuesta 400 £ if(money >= price) { resolve('¡Puedes comprar el artículo!'); } else { reject('Lo sentimos, pero no puedes permitirte este artículo.'); } }); // Utilizando el objeto Promise hasEnoughMoney.then(function(message) { console.log(message); // Registraría "¡Puedes comprar el artículo!" }).catch(function(error) { console.log(error); // Registraría "Lo sentimos, pero no puedes permitirte este artículo" si el usuario no tuviera suficiente dinero);Esta Promise toma una función con dos parámetros, \(resolve\) y \(reject\). Si el usuario tiene más o igual que el precio del artículo (500 >= 400), llamamos a la función \(resolver\) con un mensaje de éxito. En caso contrario, llamamos a la función \(rechazar\) con un mensaje de error. A continuación, utilizamos \(.then()\) para tratar el caso de éxito y \(.catch()\) para tratar el caso de error.Ejemplo avanzado de promesas en Javascript para estudiantes más experimentados
Las promesas se vuelven realmente robustas cuando se utilizan para operaciones asíncronas. Profundicemos en un ejemplo más avanzado que simula una serie de operaciones que requieren mucho tiempo. La siguiente función esperará un determinado número de segundos (parámetro) y, a continuación, registrará un mensaje en la consola.function waitAndLog(seconds) { return new Promise(function(resolve, reject) { if (seconds < 1 || seconds > 5) { reject('La entrada debe estar entre 1 y 5.'); } else { setTimeout(function() { resolve(`Esperado durante ${segundos} segundos.`); }, segundos * 1000); }}); }En este ejemplo, el método `setTimeout` se utiliza para simular una operación que requiere mucho tiempo. La Promesa sólo se resuelve o rechaza una vez transcurrido el número de segundos especificado. Para ilustrar el encadenamiento de promesas, veamos cómo podemos utilizar esta función para realizar una serie de operaciones: waitAndLog
(2) .then(function(mensaje) { console.log(mensaje); return waitAndLog(3); }) .then(function(mensaje) { console.log(mensaje); return waitAndLog(4); }
).then(function(mensaje
) { console.log(mensaje); }) .catch(function(error) { console.error(error);});Este script hace que el programa espere 2 segundos, luego registre un mensaje, luego espere 3 segundos, registre otro mensaje y, finalmente, espere 4 segundos más antes de registrar un tercer mensaje. Si algo va mal durante cualquiera de estos pasos (por ejemplo, si se intenta esperar un número de segundos no válido), se registrará un mensaje de error. Lo más importante que hay que recordar en esta ejecución avanzada es el encadenamiento de promesas mediante el método \(\.then()\), y cómo la función \(waitAndLog\) devuelve una promesa que luego se resuelve y devuelve en la llamada \(\.then()\), facilitando el manejo de secuencias de operaciones asíncronas.
Aprender el encadenamiento de promesas en Javascript
La fase "Javascript Promise Chaining" puede resultar desconcertante para quienes se inician en la programación en JavaScript. Sin embargo, dominarla abre una forma eficaz de gestionar operaciones asíncronas complejas en tu código. ¿Qué es el encadenamiento de promesas y cómo se implementa?¿Qué es una cadena de promesas en JavaScript?
En JavaScript, el encadenamiento de promesas, también conocido como secuenciación de promesas, es una técnica que te permite enlazar varias promesas y manejarlas de forma secuencial. Consiste en invocar varias promesas que se resuelven o rechazan una tras otra. Esto es beneficioso cuando se codifican situaciones con acciones asíncronas dependientes en las que una acción no puede comenzar hasta que la acción precedente se haya completado. Cada operación encadenada se inicia sólo una vez que se resuelve la operación anterior. Si se rechaza una operación de la cadena, la cadena se detiene en ese punto y se salta cualquier manejador . then( ) posterior. Puedes encadenar promesas utilizando el método .then(). Aquí está la parte valiosa: cada método .then( ) devuelve a su vez una promesa. Esto significa que puedes adjuntarle otro método .then( ), permitiéndote manejar promesas en secuencia.Devolver una promesa desde el método . then () se conoce como crear una "cadena de promesas".
Encadenar múltiples promesas de Javascript: Guía paso a paso
Para ilustrar el concepto, imagina que estás leyendo libros secuencialmente de una biblioteca digital. No empezarás el segundo libro hasta que termines el primero, y así sucesivamente. En términos de programación, empezar a leer el segundo libro puede ocurrir en la cláusula .then() de terminar el primer libro. He aquí cómo puedes crear una secuencia de promesas con JavaScript:// Nuestra hipotética función asíncrona para simular la lectura de un libro. function leerLibro(nombreLibro) { return new Promise(function(resolver, rechazar) { setTimeout(function() { resolver(`Lectura finalizada ${nombreLibro}`); }, Math.floor(Math.random() * 5000) + 1000); // La lectura tarda entre 1 y 5 segundos }); } // Ahora, encadenamos el proceso de lectura readBook('Libro 1') .then(message => { console.log(message); return readBook('Libro 2'); }) .then(message => { console.log(mensaje); return leerLibro('Libro 3'); }) .then(mensaje => { console.log(mensaje); }) .catch(error => { console.log(`Ha ocurrido un error: ${error}`);}); En primer lugar, definimos una función leerLibro que devuelve una nueva promesa. La promesa se resolverá con un mensaje indicando que la lectura se ha completado tras un número aleatorio de segundos. A continuación, invocamos a readBook('Libro 1'). Esto inicia un proceso asíncrono: la lectura del primer libro. Una vez finalizado, devuelve una promesa que se resuelve con un mensaje. Utilizamos .then() para registrar el mensaje, y luego devolvemos la promesa resultante de readBook( 'Libro 2'), forjando el eslabón de la cadena de promesas. En consecuencia, readBook('Libro 2') no se iniciará hasta que readBook('Libro 1') haya terminado y la promesa que devuelve se haya resuelto. Continuamos este patrón para el "Libro 3". Si cualquier proceso a lo largo de la cadena lanza un error o rechaza su promesa, la ejecución salta al manejador .catch, registrando el mensaje de error. Si, por el contrario, todos los libros se leen sin errores, se registrará el mensaje final del "Libro 3". En definitiva, comprender los matices y la potencia del encadenamiento de promesas en JavaScript puede ayudarte enormemente a manejar tareas asíncronas dependientes secuencialmente en tu código, mejorando la legibilidad y manejabilidad generales.
Inmersión profunda en la promesa Await de JavaScript
En la búsqueda del dominio de las promesas de JavaScript, la palabra clave "await" es un cambio de juego que merece la pena investigar. Como extensión de las promesas, "await" ayuda a organizar el código asíncrono de forma que se asemeje al código síncrono directo, fomentando la legibilidad y la facilidad de mantenimiento.¿Cómo afecta `await` a las promesas de Javascript?
La palabra clave `await` en JavaScript se utiliza junto con las Promesas. Pone en pausa la ejecución de las funciones `async` y espera la resolución o el rechazo de la Promesa. Es una adición revolucionaria que hace que la programación asíncrona basada en promesas sea más fácil e intuitiva. Sin embargo, es crucial tener en cuenta que "await" sólo puede utilizarse dentro de una función "async". Una función `async` en JavaScript es aquella en la que se pueden ejecutar operaciones asíncronas. Devuelven Promesas por defecto, independientemente de cuál sea el valor de retorno dentro del cuerpo de la función. Intentar utilizar `await` fuera de una función asíncrona provocará un error de sintaxis.La palabra clave `await` en JavaScript permite leer la información de una Promesa sin utilizar llamadas de retorno '.then' o '.catch'. En su lugar, ` await` pausa la ejecución del código hasta que se resuelve la Promesa, proporcionando un flujo de control más directo.
- 'await' hace que la ejecución de la función asíncrona se detenga y espere a la resolución de la Promesa.
- 'await' sólo puede utilizarse dentro de una función asíncrona.
- Si la Promesa se cumple, la palabra clave 'await' recupera el valor resuelto.
- Si la Promesa rechaza, lanza un error que puede capturarse utilizando 'catch'.
Uso de 'Await' en Javascript Promise: Un ejemplo
Vamos a dar un paseo práctico por el uso de 'await' con un escenario sencillo. Estás en un sitio web buscando zapatos, pero cada petición para encontrar un zapato por su ID es asíncrona. La función 'getShoeByID()' devuelve una Promesa, bien resolviendo con los datos del zapato al cabo de cierto tiempo, bien rechazando con un mensaje de error si no se encuentra el ID solicitado. Ahora, tienes una lista de IDs de zapatos, y quieres obtenerlos en orden sin hacer peticiones simultáneas. Aquí es donde 'await' brilla.async function fetchShoesInOrder(ids) { for (let id of ids) { try { const shoe = await getShoeByID(id); // Pausa hasta que la promesa se asiente console.log(`Zapato obtenido con ID ${id}: ${zapato}`); } catch(error) { console.log(`Error: No se ha podido obtener el zapato con ID ${id}: ${error}`); }} }
Aquí, utilizamos un bucle para recorrer la matriz de IDs de zapatos (`ids`). Para cada ID, enviamos una solicitud asíncrona para obtener el zapato con ese ID llamando a `getShoeByID(id)`.
Normalmente, la función `getShoeByID()` devuelve una Promesa. Pero como estamos utilizando 'await', la ejecución de `fetchShoesInOrder()` se detiene hasta que la Promesa se asienta. A continuación, registramos los datos de los zapatos o los errores encontrados.
Javascript Promises - Puntos clave
- Javascript Promises: herramienta para manejar la programación asíncrona en JavaScript, que proporciona una solución elegante y robusta para tratar las operaciones que consumen mucho tiempo.
- Métodos Javascript Promise: Métodos incorporados que incluyen ".then()", ".catch()", ".finally()", "Promise.all(iterable)", "Promise.race(iterable)" para simplificar el manejo de las operaciones asíncronas.
- Encadenamiento en Javascript Promises: Permite encadenar Promesas en Javascript y manejarlas secuencialmente, la operación encadenada sólo se inicia una vez resuelta la operación anterior, proporcionando una gran herramienta para la ejecución secuencial de tareas.
- Promesa Await de Javascript: La palabra clave ` await', junto con las funciones asíncronas, se utiliza junto con las Promesas. Pausa la ejecución de las funciones `async` y espera la resolución o el rechazo de la Promesa, haciendo que la programación asíncrona basada en promesas sea más fácil e intuitiva.
- Programación asíncrona con promesas de Javascript: Para gestionar más eficazmente operaciones que consumen mucho tiempo, como la obtención de datos de un servidor o la lectura de un archivo, incluso cuando no se conoce de antemano el orden de ejecución.
Aprende con 15 tarjetas de Promesas de Javascript en la aplicación StudySmarter gratis
Tenemos 14,000 tarjetas de estudio sobre paisajes dinámicos.
¿Ya tienes una cuenta? Iniciar sesión
Preguntas frecuentes sobre Promesas de Javascript
¿Qué es una promesa en Javascript?
Una promesa en Javascript es un objeto que representa la eventual finalización o falla de una operación asincrónica.
¿Cómo se crea una promesa en Javascript?
Para crear una promesa en Javascript, se usa el constructor `new Promise` con una función de resolución y rechazo.
¿Qué métodos se utilizan para manejar promesas?
Los métodos `then`, `catch` y `finally` se utilizan para manejar promesas en Javascript.
¿Qué es el encadenamiento de promesas?
El encadenamiento de promesas es la práctica de enlazar múltiples promesas para manejar secuencias asincrónicas de eventos.
Pon a prueba tus conocimientos con tarjetas de opción múltiple
TU PUNTUACIÓN
Tu puntuación
¡Únete a la aplicación StudySmarter y aprende de manera eficiente con millones de tarjetas y mucho más!
Aprende con 15 tarjetas de Promesas de Javascript en la aplicación StudySmarter gratis
¿Ya tienes una cuenta? Iniciar sesión
Acerca de StudySmarter
StudySmarter es una compañía de tecnología educativa reconocida a nivel mundial, que ofrece una plataforma de aprendizaje integral diseñada para estudiantes de todas las edades y niveles educativos. Nuestra plataforma proporciona apoyo en el aprendizaje para una amplia gama de asignaturas, incluidas las STEM, Ciencias Sociales e Idiomas, y también ayuda a los estudiantes a dominar con éxito diversos exámenes y pruebas en todo el mundo, como GCSE, A Level, SAT, ACT, Abitur y más. Ofrecemos una extensa biblioteca de materiales de aprendizaje, incluidas tarjetas didácticas interactivas, soluciones completas de libros de texto y explicaciones detalladas. La tecnología avanzada y las herramientas que proporcionamos ayudan a los estudiantes a crear sus propios materiales de aprendizaje. El contenido de StudySmarter no solo es verificado por expertos, sino que también se actualiza regularmente para garantizar su precisión y relevancia.
Aprende más
