El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem el concepte de callbacks en JavaScript, una tècnica fonamental per gestionar operacions asíncrones. Aprendrem què són els callbacks, com utilitzar-los i veurem exemples pràctics per entendre millor el seu funcionament.

Què és un Callback?

Un callback és una funció que es passa com a argument a una altra funció i que s'executa després que aquesta funció hagi completat la seva tasca. Els callbacks són especialment útils per gestionar operacions asíncrones, com ara sol·licituds HTTP, temporitzadors i esdeveniments.

Característiques Clau dels Callbacks:

Asíncronia: Permeten executar codi després que una operació asíncrona hagi finalitzat.
Flexibilitat: Poden ser reutilitzats en diferents parts del codi.
Control de Flux: Faciliten la gestió del flux de dades en aplicacions asíncrones.

Exemple Bàsic de Callback

Vegem un exemple senzill per entendre com funcionen els callbacks:

function saludar(nom, callback) {
    console.log('Hola, ' + nom + '!');
    callback();
}

function despedir() {
    console.log('Adéu!');
}

saludar('Anna', despedir);

Explicació del Codi:

Funció saludar: Accepta un nom i una funció callback com a arguments. Primer, imprimeix un missatge de salutació i després crida la funció callback.
Funció despedir: Simplement imprimeix un missatge de comiat.
Crida a saludar: Es passa el nom 'Anna' i la funció despedir com a arguments. Després de saludar, es crida la funció despedir.

Callbacks en Operacions Asíncrones

Els callbacks són molt comuns en operacions asíncrones com les sol·licituds HTTP. Vegem un exemple amb setTimeout, una funció que executa un codi després d'un cert temps:

console.log('Inici');

setTimeout(function() {
    console.log('Aquest missatge apareix després de 2 segons');
}, 2000);

console.log('Final');

Explicació del Codi:

console.log('Inici'): Imprimeix 'Inici' immediatament.
setTimeout: Configura un temporitzador de 2 segons. Després d'aquest temps, executa la funció callback que imprimeix un missatge.
console.log('Final'): Imprimeix 'Final' immediatament després de configurar el temporitzador.

Error Handling amb Callbacks

És important gestionar els errors quan es treballa amb callbacks. Vegem un exemple de com fer-ho:

function llegirFitxer(nomFitxer, callback) {
    // Simulació de lectura de fitxer
    setTimeout(function() {
        if (nomFitxer === 'existent.txt') {
            callback(null, 'Contingut del fitxer');
        } else {
            callback('Error: Fitxer no trobat');
        }
    }, 1000);
}

llegirFitxer('existent.txt', function(error, contingut) {
    if (error) {
        console.error(error);
    } else {
        console.log(contingut);
    }
});

Explicació del Codi:

Funció llegirFitxer: Simula la lectura d'un fitxer. Després d'un segon, crida el callback amb un error o el contingut del fitxer.
Crida a llegirFitxer: Es passa el nom del fitxer i una funció callback que gestiona l'error o imprimeix el contingut.

Exercicis Pràctics

Exercici 1: Temporitzador amb Callback

Crea una funció temporitzador que accepti un temps en mil·lisegons i un callback. La funció ha d'executar el callback després del temps especificat.

function temporitzador(temps, callback) {
    setTimeout(callback, temps);
}

// Prova la funció
temporitzador(3000, function() {
    console.log('Han passat 3 segons');
});

Exercici 2: Sol·licitud Asíncrona Simulada

Crea una funció solicitudAsincrona que accepti una URL i un callback. La funció ha de simular una sol·licitud HTTP i cridar el callback amb un error o una resposta després de 2 segons.

function solicitudAsincrona(url, callback) {
    setTimeout(function() {
        if (url === 'https://api.exemple.com') {
            callback(null, { data: 'Resposta de l\'API' });
        } else {
            callback('Error: URL no vàlida');
        }
    }, 2000);
}

// Prova la funció
solicitudAsincrona('https://api.exemple.com', function(error, resposta) {
    if (error) {
        console.error(error);
    } else {
        console.log(resposta);
    }
});

Resum

En aquesta secció, hem après què són els callbacks i com utilitzar-los per gestionar operacions asíncrones en JavaScript. Hem vist exemples pràctics i hem practicat amb exercicis per reforçar els conceptes apresos. Els callbacks són una eina poderosa per controlar el flux de dades en aplicacions asíncrones, i comprendre'ls és essencial per convertir-se en un desenvolupador JavaScript eficient.

JavaScript Asíncron: Callbacks

Què és un Callback?

Característiques Clau dels Callbacks:

Exemple Bàsic de Callback

Explicació del Codi:

Callbacks en Operacions Asíncrones

Explicació del Codi:

Error Handling amb Callbacks

Explicació del Codi:

Exercicis Pràctics

Exercici 1: Temporitzador amb Callback

Exercici 2: Sol·licitud Asíncrona Simulada

Resum

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