Introduzione alle Promise in JavaScript

Sapete già che l'utilizzo del modello di asincronicità basato su callback porta facilmente alla situazione del callback hell. Pertanto, in JavaScript è stato introdotto un nuovo modello chiamato promise (promise). Studiamo questo modello.

Una promise è un oggetto a cui viene passata come parametro una funzione, all'interno della quale è necessario inserire il nostro codice asincrono:

javascriptlet promise = new Promise(function() {
  // codice asincrono
});

Come vedete, ho memorizzato l'oggetto con la promise in una variabile promise. In un altro punto del codice posso applicare a questa variabile il metodo then, passandogli una funzione con il codice che deve essere eseguito al completamento del codice asincrono, scritto alla creazione di questa promise:

javascriptpromise.then(function() {
  // verrà eseguito al completamento del codice asincrono
});

Sembra complicato, quindi diamo un'occhiata a un esempio. Supponiamo che io abbia questo codice asincrono:

javascriptsetTimeout(function() {
  let result = [1, 2, 3, 4, 5];
}, 3000);

Supponiamo che voglia risolvere per esso il nostro compito principale dell'asincronicità: eseguire del codice dopo lo scadere del timer. Inoltre, non voglio inserire questo codice all'interno del timer stesso e voglio che in questo codice arrivi in qualche modo il risultato, scritto da me nella variabile result. In effetti, abbiamo risolto questo compito nelle lezioni precedenti tramite callback e sottoscrizioni. Vediamo ora come farlo con le promise.

Per cominciare, dobbiamo avvolgere il nostro codice asincrono in una promise:

javascriptlet promise = new Promise(function() {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

Questo, tuttavia, non è sufficiente. Dobbiamo indicare esplicitamente che il nostro codice asincrono è terminato. In questo ci aiuta una speciale funzione di completamento, che viene automaticamente passata nel primo parametro della funzione, se specificato:

javascriptlet promise = new Promise(function(resolve) { // specifichiamo il parametro
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

Utilizzando la funzione di completamento possiamo esplicitamente indicare alla promise che il codice asincrono è terminato. Per fare questo, dobbiamo chiamare questa funzione nel punto che desideriamo:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(); // completiamo la promise
  }, 3000);
});

Inoltre, se vogliamo passare all'esterno qualche risultato del codice asincrono, possiamo passarlo come parametro alla nostra funzione di completamento:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(result); // passiamo il risultato
  }, 3000);
});

Possiamo, naturalmente, eliminare la variabile intermedia:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    resolve([1, 2, 3, 4, 5]);
  }, 3000);
});

Ora in qualsiasi altro punto possiamo chiamare il metodo then della nostra promise:

javascriptpromise.then(function() {
  // si attiverà al completamento della promise
});

Il risultato dell'operazione della promise arriverà nel primo parametro della funzione, se desideriamo specificarlo:

javascriptpromise.then(function(result) {
  console.log(result); // visualizzerà l'array con il risultato
});