Introducció a les Promeses

Les promeses són una característica fonamental de JavaScript per gestionar operacions asíncrones. En TypeScript, les promeses es poden utilitzar de la mateixa manera que en JavaScript, però amb l'avantatge addicional de la tipificació estàtica.

Què és una Promesa?

Una promesa és un objecte que representa el resultat eventual (o error) d'una operació asíncrona. Una promesa pot estar en un dels següents estats:

Pending (pendent): La promesa està en procés.
Fulfilled (complerta): L'operació s'ha completat amb èxit.
Rejected (rebutjada): L'operació ha fallat.

Creació d'una Promesa

Per crear una promesa, utilitzem el constructor Promise, que pren una funció amb dos paràmetres: resolve i reject.

const myPromise: Promise<number> = new Promise((resolve, reject) => {
    const success = true; // Simulació d'una condició

    if (success) {
        resolve(42); // Operació exitosa
    } else {
        reject('Error: Operació fallida'); // Operació fallida
    }
});

Consumint una Promesa

Per consumir una promesa, utilitzem els mètodes then i catch.

myPromise
    .then((result) => {
        console.log('Resultat:', result); // Resultat: 42
    })
    .catch((error) => {
        console.error('Error:', error);
    });

Exemple Pràctic

Vegem un exemple pràctic on fem una crida asíncrona simulada a una API.

Simulació d'una Crida a una API

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Simulació d'una condició

            if (success) {
                resolve('Dades recuperades amb èxit');
            } else {
                reject('Error en recuperar les dades');
            }
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // Dades recuperades amb èxit
    })
    .catch((error) => {
        console.error(error);
    });

Tipificació de Promeses

En TypeScript, podem especificar el tipus de dades que una promesa retornarà utilitzant la sintaxi Promise<T>.

function fetchNumber(): Promise<number> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(100);
        }, 1000);
    });
}

fetchNumber()
    .then((num) => {
        console.log('Número:', num); // Número: 100
    })
    .catch((error) => {
        console.error('Error:', error);
    });

Exercicis Pràctics

Exercici 1: Creació d'una Promesa

Crea una funció getUserName que retorni una promesa que es resol amb el nom d'un usuari després de 1 segon.

function getUserName(): Promise<string> {
    // Implementa la funció aquí
}

Solució

function getUserName(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('John Doe');
        }, 1000);
    });
}

getUserName()
    .then((name) => {
        console.log('Nom de l\'usuari:', name); // Nom de l'usuari: John Doe
    })
    .catch((error) => {
        console.error('Error:', error);
    });

Exercici 2: Gestió d'Errors

Modifica la funció getUserName per simular un error i gestiona'l utilitzant catch.

function getUserName(): Promise<string> {
    // Implementa la funció aquí
}

Solució

function getUserName(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = false; // Simulació d'un error

            if (success) {
                resolve('John Doe');
            } else {
                reject('Error: No s\'ha pogut recuperar el nom de l\'usuari');
            }
        }, 1000);
    });
}

getUserName()
    .then((name) => {
        console.log('Nom de l\'usuari:', name);
    })
    .catch((error) => {
        console.error('Error:', error); // Error: No s'ha pogut recuperar el nom de l'usuari
    });

Resum

En aquesta secció, hem après què són les promeses, com crear-les i consumir-les, i com gestionar errors en operacions asíncrones. Les promeses són una eina poderosa per treballar amb codi asíncron i, amb la tipificació de TypeScript, podem escriure codi més segur i mantenible. En la següent secció, explorarem l'ús de async i await per simplificar encara més el treball amb promeses.

Promeses

Introducció a les Promeses

Què és una Promesa?

Creació d'una Promesa

Consumint una Promesa

Exemple Pràctic

Simulació d'una Crida a una API

Tipificació de Promeses

Exercicis Pràctics

Exercici 1: Creació d'una Promesa

Solució

Exercici 2: Gestió d'Errors

Solució

Resum

Curs de TypeScript

Mòdul 1: Introducció a TypeScript

Mòdul 2: Treballant amb Tipus

Mòdul 3: Tipus Avançats

Mòdul 4: Funcions i Mòduls

Mòdul 5: Programació Asíncrona

Mòdul 6: Eines i Millors Pràctiques

Mòdul 7: Temes Avançats