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

Async/Await

Següent ►
►

Introducció

En aquest tema, aprendrem sobre async i await, dues característiques fonamentals de JavaScript i TypeScript que faciliten la gestió de codi asíncron. Aquestes característiques permeten escriure codi asíncron de manera més clara i llegible, semblant al codi síncron.

Què és async i await?

  • async: La paraula clau async s'utilitza per declarar una funció asíncrona. Una funció asíncrona retorna una promesa.
  • await: La paraula clau await s'utilitza dins d'una funció asíncrona per esperar que una promesa es resolgui. Pausa l'execució de la funció fins que la promesa es resol o es rebutja.

Exemple Bàsic

Vegem un exemple bàsic per entendre com funcionen async i await:

function delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
    console.log('Inici');
    await delay(2000); // Espera 2 segons
    console.log('Final');
}

example();

Explicació del Codi

  1. Funció delay: Aquesta funció retorna una promesa que es resol després d'un retard especificat en mil·lisegons.
  2. Funció example: Aquesta és una funció asíncrona que utilitza await per esperar que la promesa retornada per delay es resolgui abans de continuar amb l'execució.

Avantatges de async/await

  • Llegibilitat: El codi asíncron escrit amb async/await és més fàcil de llegir i entendre que el codi basat en promeses.
  • Depuració: És més fàcil depurar codi asíncron amb async/await perquè les traces d'error són més clares i semblen més a codi síncron.

Exemple Pràctic: Crida a una API

Vegem un exemple pràctic on fem una crida a una API utilitzant async/await:

interface User {
    id: number;
    name: string;
    username: string;
    email: string;
}

async function fetchUser(userId: number): Promise<User> {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    if (!response.ok) {
        throw new Error('Error en la crida a l\'API');
    }
    const user: User = await response.json();
    return user;
}

async function displayUser(userId: number) {
    try {
        const user = await fetchUser(userId);
        console.log(`Nom: ${user.name}`);
        console.log(`Email: ${user.email}`);
    } catch (error) {
        console.error('Error:', error);
    }
}

displayUser(1);

Explicació del Codi

  1. Interfície User: Defineix l'estructura de l'objecte usuari.
  2. Funció fetchUser: Aquesta funció asíncrona fa una crida a l'API per obtenir les dades d'un usuari i retorna una promesa que es resol amb l'objecte usuari.
  3. Funció displayUser: Aquesta funció asíncrona utilitza fetchUser per obtenir les dades de l'usuari i les mostra per consola. També gestiona els errors amb un bloc try/catch.

Exercicis Pràctics

Exercici 1: Retard amb async/await

Crea una funció asíncrona que esperi 3 segons abans de mostrar un missatge per consola.

async function waitAndLog() {
    // El teu codi aquí
}

waitAndLog();

Solució

async function waitAndLog() {
    await delay(3000);
    console.log('Han passat 3 segons');
}

waitAndLog();

Exercici 2: Crida a una API amb Gestió d'Errors

Modifica la funció fetchUser per gestionar errors de xarxa i mostrar un missatge d'error adequat.

async function fetchUser(userId: number): Promise<User> {
    // El teu codi aquí
}

Solució

async function fetchUser(userId: number): Promise<User> {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Error en la crida a l\'API');
        }
        const user: User = await response.json();
        return user;
    } catch (error) {
        console.error('Error de xarxa:', error);
        throw error;
    }
}

Conclusió

En aquest tema, hem après com utilitzar async i await per gestionar codi asíncron de manera més clara i llegible. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. Ara estem preparats per aplicar aquests coneixements en projectes reals i gestionar codi asíncron de manera eficient.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats