Promise JavaScript

"Io prometto un risultato!"

"Codice di produzione" è il codice che richiede del tempo

"Codice di consumo" è il codice che deve aspettare un risultato

Promise è un oggetto JavaScript che collega il codice di generazione e il codice di consumo

Oggetto Promise JavaScript

Un oggetto Promise JavaScript contiene il codice di produzione e le chiamate al codice di consumo:

Sintassi di Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Codice di produzione" (può richiedere del tempo)
  myResolve(); // In caso di successo
  myReject();  // In caso di errore
});
// "Codice di consumo" (deve aspettare un impegno risolto)
myPromise.then(
  function(value) { /* Codice da eseguire in caso di successo */ },
  function(error) { /* Codice da eseguire in caso di errore */ }
);

Quando esegui il codice e ottieni un risultato, dovrebbe chiamare uno dei due callback:

Risultato Chiamata
Successo myResolve(valore risultato)
Errore myReject(oggetto errore)

Proprietà dell'oggetto Promise

Un oggetto Promise JavaScript può essere:

  • In sospeso
  • Risolto
  • Rifiutato

Un oggetto Promise supporta due proprietà:state e result.

Quando un oggetto Promise è "in sospeso" (in lavorazione), il risultato è undefined.

Quando un oggetto Promise è "risolto", il risultato è un valore.

Quando un oggetto Promise è "rifiutato", il risultato è un oggetto di errore.

myPromise.state myPromise.result
"in sospeso" undefined
"risolto" Valore del risultato
"rifiutato" Oggetto error

Non puoi accedere alle proprietà state e result di Promise.

Devi utilizzare il metodo Promise per gestire Promise.

Come usare Promise

Ecco come utilizzare Promise:}

myPromise.then(
  function(value) { /* codice se ha successo */ },
  function(error) { /* codice se ci sono errori */ }
);

Promise.then() ha due parametri, uno per il callback di successo e uno per il callback di fallimento.

Entrambi sono opzionali, quindi puoi aggiungere callback di successo o fallimento.

Esempio

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Generazione del codice (potrebbe richiedere del tempo)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prova da solo

Esempio di Promise in JavaScript

Per dimostrare l'uso di Promise, utilizzeremo l'esempio di callback del capitolo precedente:

  • Attesa del timeout
  • Attesa del file

Attesa del timeout

Esempio dell'uso di callback

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

Prova da solo

Esempio dell'uso di Promise

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

Prova da solo

Attesa del file

Esempio dell'uso di 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);

Prova da solo

Esempio dell'uso di 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("File non trovato");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Prova da solo

Supporto browser

ECMAScript 2015, noto anche come ES6, ha introdotto l'oggetto Promise di JavaScript.

La tabella sottostante indica la versione del browser che supporta completamente l'oggetto Promise:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Febbraio 2014 Luglio 2015 Aprile 2014 Settembre 2014 Marzo 2014