Promesse in Angular: una guida per principianti

Impara le basi delle promesse in Angular in questa guida per principianti. Le promesse sono un potente strumento per la gestione del codice asincrono e Angular le utilizza ampiamente.

In Angular, una promessa è un oggetto JavaScript che rappresenta l'eventuale completamento (o fallimento) di un'operazione asincrona e ci consente di gestire il risultato quando diventa disponibile.

Le promesse sono ampiamente utilizzate in Angular per gestire operazioni asincrone come le richieste HTTP, in cui non sappiamo quando il server risponderà e non vogliamo bloccare l'interfaccia utente durante l'attesa di una risposta.

Ecco un esempio di utilizzo di una promessa in Angular per effettuare una richiesta HTTP:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-root',
    template: '<h1>{{data}}</h1>'
})
export class AppComponent implements OnInit {
    data: string;
    constructor(private http: HttpClient) {}
    ngOnInit() {
        this.http.get('https://jsonplaceholder.typicode.com/todos/1').toPromise().then((response) => {
            this.data = response['title'];
        }).catch((error) => {
            console.log(error);
        });
    }
}

In questo esempio, stiamo utilizzando il HttpClientservizio dal @angular/common/httpmodulo per effettuare una richiesta HTTP GET a un'API segnaposto JSON. Quindi chiamiamo il toPromise()metodo per convertire l'osservabile restituito dal get()metodo in una promessa. Infine, utilizziamo i metodi .then()e .catch()per gestire la risposta e gli eventuali errori che possono verificarsi.

Il then() metodo the viene chiamato quando la promessa viene risolta (cioè quando riceviamo una risposta dal server) e il catch()metodo viene chiamato quando la promessa viene rifiutata (cioè quando c'è un errore). In questo esempio, stiamo impostando la dataproprietà del componente sulla titleproprietà dell'oggetto risposta, che riceviamo dal server.

#angular