Promesas de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos

"¡Prometo un resultado!"

"Producir código" es código que puede llevar algún tiempo.

"Código consumidor" es código que debe esperar el resultado.

Una promesa es un objeto JavaScript que vincula la producción de código y el consumo de código.

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:

Success

myResolve(valor del resultado)

Error

myReject(objeto de error)


Propiedades del objeto de promesa

Un objeto de promesa de JavaScript 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 Promise se "cumple", el resultado es un valor.

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

"pending"

indefinido

"fulfilled"

un valor de resultado

"rejected"

un objeto de error

No puede acceder a las propiedades de la Promesa estado y resultado.

Debe utilizar un método Promise para manejar las promesas.


Promesa cómo hacerlo

A continuación se explica cómo utilizar 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 en caso de éxito o 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);}
);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// some code (try to change x to 5)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>


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 devolución de llamada

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

Ejemplo de uso de promesa

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Esperando un archivo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callbacks</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.open('GET', "mycar.html");
  req.send();
}

getFile(myDisplayer); 
</script>

</body>
</html>

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  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);}
);
</script>

</body>
</html>

Soporte del 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