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:

let 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:

promise.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:

setTimeout(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:

let 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:

let 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:

let 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:

let 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:

let 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:

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

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

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

Create una promise, all'interno della quale ci sarà un ritardo di 5 secondi, dopo la quale la promise deve completarsi, restituendo come suo risultato un testo a piacere. Visualizzate questo testo sullo schermo.