Promesas de JavaScript
"¡Prometo un resultado!"
"Producir código" es un código que puede llevar algún tiempo
El "código de consumo" es un código que debe esperar el resultado
Una promesa es un objeto de JavaScript que vincula la producción de código y el código de consumo.
Objeto de promesa de JavaScript
Un objeto JavaScript Promise contiene tanto el código de producción como las llamadas al código de consumo:
Sintaxis de promesa
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Cuando el código productor obtiene el resultado, debe llamar a una de las dos devoluciones de llamada:
| Resultado | Llamar |
|---|---|
| Éxito | myResolve(valor de resultado) |
| Error | myReject(objeto de error) |
Propiedades del objeto de promesa
Un objeto JavaScript Promise puede ser:
- Pendiente
- cumplido
- Rechazado
El objeto Promise admite dos propiedades: estado y resultado .
Mientras un objeto Promise está "pendiente" (en funcionamiento), el resultado no está definido.
Cuando un objeto Promesa se "cumple", el resultado es un valor.
Cuando se "rechaza" un objeto Promise, el resultado es un objeto de error.
| myPromise.state | myPromise.resultado |
|---|---|
| "pendiente" | indefinido |
| "cumplido" | un valor de resultado |
| "rechazado" | un objeto de error |
No puede acceder al estado y resultado de las propiedades de Promise .
Debe usar un método Promise para manejar las promesas.
Promesa de cómo
Aquí está cómo usar una Promesa:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() toma dos argumentos, una devolución de llamada para el éxito y otra para el fracaso.
Ambos son opcionales, por lo que puede agregar una devolución de llamada solo para el éxito o el fracaso.
Ejemplo
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Ejemplos de promesas de JavaScript
Para demostrar el uso de promesas, usaremos los ejemplos de devolución de llamada del capítulo anterior:
- Esperando un tiempo de espera
- Esperando un archivo
Esperando un tiempo de espera
Ejemplo de uso de devolución de llamada
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Ejemplo usando promesa
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
esperando un archivo
Ejemplo usando devolución de llamada
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(req.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Ejemplo usando Promesa
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.htm");
req.onload = function() {
if (req.status == 200) {
myResolve(req.response);
} else {
myReject("File not Found");
}
};
req.send();
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Compatibilidad con navegador
ECMAScript 2015, también conocido como ES6, introdujo el objeto JavaScript Promise.
La siguiente tabla define la primera versión del navegador con soporte completo para objetos Promise:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |