Promise de JavaScript

"¡Prometo un resultado!"

"Código de producción" es el código que necesita algo de tiempo

"Código de consumo" es el código que debe esperar un resultado

Promise es un objeto JavaScript que liga el código de generación y el código de consumo

Objeto Promise de JavaScript

Un objeto Promise de JavaScript contiene código de producción y llamadas a código de consumo:

Sintaxis de Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Código de producción" (puede necesitar algo de tiempo)
  myResolve(); // Cuando tiene éxito
  myReject();  // Cuando ocurre un error
});
// "Código de consumo" (debe esperar una promesa cumplida)
myPromise.then(
  function(value) { /* Código para cuando tiene éxito */ },
  function(error) { /* Código para cuando ocurre un error */ }
);

Cuando se ejecuta el código y se obtiene un resultado, debe llamar a uno de los dos devoluciones de llamada:

Resultado Llamar
Éxito myResolve(valor de resultado)
Error myReject(objeto de error)

Propiedades del objeto Promise

Un objeto Promise de JavaScript puede ser:

  • Pendiente
  • Cumplido
  • Rechazado

Un objeto Promise admite dos propiedades:state y result.

Cuando un objeto Promise está "pendiente" (trabajando), el resultado es undefined.

Cuando un objeto Promise es "cumplido", el resultado es un valor.

Cuando un objeto Promise es "rechazado", el resultado es un objeto de error.

myPromise.state myPromise.result
"pendiente" undefined
"cumplido" valor de resultado
"rechazado" objeto de error

No puede acceder a las propiedades de Promise state y result.

Usted debe usar el método Promise para manejar Promise.

¿Cómo usar Promise?

A continuación, se muestra cómo usar Promise:

myPromise.then(
  function(value) { /* código si tiene éxito */ },
  function(error) { /* código si hay algún error */ }
);

Promise.then() tiene dos parámetros, uno para el callback de éxito y otro para el callback de fracaso.

Ambos son opcionales, por lo que puede agregar callbacks de éxito o fracaso.

Ejemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Generar código (esto puede tomar algún tiempo)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prueba personalmente

Ejemplo de Promise en JavaScript

Para demostrar el uso de Promise, utilizaremos el ejemplo de callback del capítulo anterior:

  • Esperando tiempo de expiración
  • Esperando el archivo

Esperando tiempo de expiración

Ejemplo de uso de callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Prueba personalmente

Ejemplo de uso de Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Prueba personalmente

Esperando el archivo

Ejemplo de uso de callback

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);

Prueba personalmente

Ejemplo de uso de Promise

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("No se encontró archivo");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prueba personalmente

Compatibilidad del navegador

ECMAScript 2015, también conocido como ES6, introduce el objeto Promise de JavaScript.

La siguiente tabla indica la versión del navegador que es la primera en soportar completamente el objeto Promise:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Febrero de 2014 Julio de 2015 Abril de 2014 Septiembre de 2014 Marzo de 2014