El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Promeses i Async/Await

Següent ►
►

En aquest tema, explorarem les promeses i la sintaxi async/await en JavaScript, que són fonamentals per treballar amb operacions asíncrones de manera més eficient i llegible.

Què és una Promesa?

Una promesa és un objecte que representa el resultat eventual (o error) d'una operació asíncrona. Les promeses poden 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

const myPromise = new Promise((resolve, reject) => {
    // Operació asíncrona
    let success = true; // Simulació d'èxit o fracàs

    if (success) {
        resolve("Operació completada amb èxit!");
    } else {
        reject("Operació fallida.");
    }
});

Consumir una Promesa amb .then() i .catch()

myPromise
    .then((message) => {
        console.log(message); // "Operació completada amb èxit!"
    })
    .catch((error) => {
        console.error(error); // "Operació fallida."
    });

Exemple Pràctic: Simulació d'una Crida a una API

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { user: "John Doe", age: 30 };
            resolve(data);
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // { user: "John Doe", age: 30 }
    })
    .catch((error) => {
        console.error(error);
    });

Async/Await

La sintaxi async/await és una manera més clara i concisa de treballar amb promeses. Permet escriure codi asíncron que sembla sincrònic.

Funcions Async

Una funció declarada amb la paraula clau async retorna una promesa.

async function myAsyncFunction() {
    return "Hola, món!";
}

myAsyncFunction().then((message) => {
    console.log(message); // "Hola, món!"
});

Await

La paraula clau await només es pot utilitzar dins d'una funció async i espera que una promesa es completi.

async function fetchDataAsync() {
    try {
        const data = await fetchData();
        console.log(data); // { user: "John Doe", age: 30 }
    } catch (error) {
        console.error(error);
    }
}

fetchDataAsync();

Exemple Pràctic: Crida a una API amb Async/Await

async function getUserData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error('Error obtenint les dades:', error);
    }
}

getUserData();

Exercicis Pràctics

Exercici 1: Crear una Promesa

Crea una promesa que simuli una operació asíncrona que es resolgui després de 3 segons amb el missatge "Operació completada".

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Operació completada");
    }, 3000);
});

myPromise.then((message) => {
    console.log(message); // "Operació completada"
});

Exercici 2: Convertir a Async/Await

Converteix el següent codi basat en promeses a utilitzar async/await.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { user: "Jane Doe", age: 25 };
            resolve(data);
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

Solució:

async function fetchDataAsync() {
    try {
        const data = await fetchData();
        console.log(data); // { user: "Jane Doe", age: 25 }
    } catch (error) {
        console.error(error);
    }
}

fetchDataAsync();

Errors Comuns i Consells

  • Oblidar el catch o try/catch: Sempre gestiona els errors quan treballis amb promeses o async/await.
  • No utilitzar await dins de funcions async: Recorda que await només es pot utilitzar dins de funcions declarades amb async.
  • No esperar la promesa: Si no utilitzes await o .then(), la promesa no es gestionarà correctament.

Resum

En aquesta secció, hem après sobre les promeses i la sintaxi async/await en JavaScript. Les promeses ens permeten gestionar operacions asíncrones de manera més clara i estructurada, mentre que async/await simplifica encara més aquesta gestió, fent el codi més llegible i mantenible. Amb aquests coneixements, estàs preparat per treballar amb operacions asíncrones de manera eficient en els teus projectes JavaScript.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats