Las promesas son una característica de JavaScript que permite que el código continúe ejecutándose en segundo plano y realice una acción con el resultado cuando se haya completado. Este artículo le mostrará cómo usar Promises.
¿Qué es una 'Promesa' en JavaScript?
Una Promesa es un objeto en JavaScript que actúa como marcador de posición para el resultado final de una operación.
Una Promesa es:
- Pendiente mientras se completa la operación
- Cumplido cuando la operación es exitosa
- Rechazado si falla la operación
Las promesas permiten la ejecución de código asíncrono en JavaScript.
Síncrono vs Asíncrono
Ejecución asincrónica significa que puede ocurrir más de una cosa al mismo tiempo. El código síncrono es secuencial:cada línea de código se ejecuta una tras otra. El código no se ejecutará hasta que el código anterior se haya ejecutado con éxito.
La programación asincrónica significa que el código se puede ejecutar junto con otro código, devolviendo un resultado cuando se ha completado, no basado en la ejecución de líneas de código anteriores. Por ejemplo, puede configurar una función asíncrona para recuperar algunos datos de un servidor remoto y continuar realizando otras tareas mientras espera que se descarguen esos datos.
La antigua forma asincrónica:devoluciones de llamadas de funciones
JavaScript es un lenguaje de programación síncrono.
Históricamente, las tareas asincrónicas se realizaban en JavaScript mediante devoluciones de llamada. Las funciones de devolución de llamada son funciones a las que se llama desde otras funciones una vez que han terminado de ejecutarse. Las devoluciones de llamada pueden ser síncronas o asíncronas, y se usaban comúnmente para implementar la funcionalidad asíncrona.
Al pasar una función a otra, las devoluciones de llamadas se pueden encadenar:cada función llama a la siguiente a medida que se completa, mientras el script principal continúa ejecutándose.
Promesas para código asíncrono
El enfoque anterior puede complicarse rápidamente. Las promesas son una característica relativamente nueva de JavaScript que agrega soporte nativo para código asíncrono. Las promesas le permiten esperar el resultado de una función sin pausar la ejecución de su secuencia de comandos.
Prometer sintaxis de JavaScript
A Promise es un objeto de JavaScript. Al crear una Promesa, proporciona el código que debe ejecutar y las acciones que se deben tomar si la promesa tiene éxito o falla.
Creando Promesas
Las promesas se inicializan como cualquier otra variable:
var myPromise = new Promise();
Arriba, se crea una Promesa. Pero no hace nada. Se debe agregar una función que contenga el código que Promise ejecutará y esperará:
var myPromise = new Promise((resolve, reject) => {
// If your code is successful, call resolve to complete the Promise successfully
resolve(result);
// If your code is not successful, call reject
reject(error);
}); Aquí se crea una Promesa que contiene una función. Se pasan dos parámetros de la Promesa a la función: resolver y rechazar . La resolución El parámetro es una función que debe llamarse con el resultado exitoso de su código, mientras que rechazar se debe llamar a la función si hay un problema.
Tenga en cuenta que la sintaxis de la función de flecha se utiliza en el ejemplo anterior.
La variable pasada a resolver o rechazar serán suministrados como resultado de la Promesa.
Uso del resultado de una promesa
Se puede acceder al resultado de una promesa una vez que la Promesa ha tenido éxito (resuelta ) o fallado (rechazado ). Esto se hace usando .then() y atrapar() :
var myPromise = new Promise((resolve, reject) => {
// Your code here, calling either resolve() or reject()
});
myPromise.then(result => {
// The Promise has completed successfully - the result can be accessed using the argument returned by .then()
});
myPromise.catch(error => {
// The Promise has failed - the error or object passed to reject() can be accessed using the argument returned by .catch()
});
myPromise.finally(() => {
// The Promise either succeeded or failed - actions can be taken here regardless of the outcome
}); Ejemplos de Promesas
La demostración más simple de una promesa es establecer un tiempo de espera, un retraso que retrasará la resolución de la Promesa. Podrás ver la ejecución de Promise, el paso del tiempo y el retorno del resultado, mientras el resto de tu código continúa ejecutándose:
console.log('Hello');
var myPromise = new Promise((resolve, reject) => {
setTimeout( function() {
resolve("This is the delayed result of a promise - it's asynchronous!");
}, 1000)
});
console.log('This message will appear before the one inside the Promise');
myPromise.then(result => {
console.log(result);
}); Si ejecuta el código anterior, verá que los mensajes no aparecen en el orden secuencial en que aparecen en el código (la promesa se retrasa 1000 milisegundos) y el código posterior continúa ejecutándose. Cuando se resuelve la promesa, se imprime el resultado.
Ejemplo del mundo real
Probablemente el mejor ejemplo, y uno que es probable que utilice, es JavaScript fetch API.
La búsqueda La API se utiliza para acceder a datos remotos a través de HTTP. Dado que estas transferencias de red llevan tiempo, obtener es asíncrono y devuelve una promesa cuando se le llama:
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error)); Arriba, los datos JSON se cargan desde una URL de ejemplo a través de HTTP usando fetch . Se devuelve una promesa, que se maneja mediante dos llamadas a then() – el primero carga el resultado JSON de la llamada HTTP y el segundo lo imprime usando console.log() . Si se produce un error, se captura con catch() e impreso también.
Esto demuestra la brevedad del uso de promesas:al usar la sintaxis de la función de flecha y Promesas, lo que de otro modo habría sido una serie desordenada de devoluciones de llamada para implementar una solución asincrónica se puede lograr en unas pocas líneas de código.