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

Utilitzar observables

Següent ►
►

Els observables són una part fonamental de la programació reactiva a Angular. Proporcionen una manera poderosa de gestionar fluxos de dades asíncrons, com ara sol·licituds HTTP, esdeveniments d'usuari i molt més. En aquest tema, aprendrem què són els observables, com crear-los, com subscriure-s'hi i com utilitzar operadors per transformar i combinar fluxos de dades.

Què és un observable?

Un observable és un objecte que emet una seqüència de valors al llarg del temps. Els observables són una part clau de la llibreria RxJS (Reactive Extensions for JavaScript), que s'integra perfectament amb Angular.

Característiques clau dels observables:

  • Emissió de valors: Un observable pot emetre múltiples valors al llarg del temps.
  • Asíncron: Els observables poden gestionar operacions asíncrones, com sol·licituds HTTP.
  • Subscripció: Per rebre els valors emesos per un observable, cal subscriure-s'hi.
  • Cancel·lació: Les subscripcions es poden cancel·lar per evitar fuites de memòria.

Crear un observable

Podem crear un observable utilitzant la funció Observable.create o utilitzant operadors de creació com of, from, interval, etc.

Exemple: Crear un observable amb of

import { Observable, of } from 'rxjs';

const observable = of(1, 2, 3);

observable.subscribe({
  next: value => console.log(value),
  error: err => console.error('Error: ' + err),
  complete: () => console.log('Completed')
});

Explicació del codi:

  • Importació: Importem Observable i of de la llibreria rxjs.
  • Creació: Utilitzem of per crear un observable que emet els valors 1, 2 i 3.
  • Subscripció: Ens subscrivim a l'observable per rebre els valors emesos. La subscripció té tres parts: next (per rebre valors), error (per gestionar errors) i complete (per gestionar la finalització).

Subscripció a un observable

Per rebre els valors emesos per un observable, cal subscriure-s'hi. La subscripció és el procés de registrar funcions de devolució de trucada (callbacks) que gestionen els valors, errors i la finalització.

Exemple: Subscripció a un observable

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hola');
  subscriber.next('Món');
  subscriber.complete();
});

observable.subscribe({
  next: value => console.log(value),
  error: err => console.error('Error: ' + err),
  complete: () => console.log('Completed')
});

Explicació del codi:

  • Creació: Creem un observable utilitzant el constructor Observable. L'observable emet els valors 'Hola' i 'Món' i després es completa.
  • Subscripció: Ens subscrivim a l'observable per rebre els valors emesos.

Operadors d'observables

Els operadors són funcions que permeten transformar, combinar i gestionar fluxos de dades d'observables. RxJS proporciona una àmplia gamma d'operadors.

Exemple: Utilitzar l'operador map

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const observable = of(1, 2, 3).pipe(
  map(value => value * 2)
);

observable.subscribe({
  next: value => console.log(value),
  error: err => console.error('Error: ' + err),
  complete: () => console.log('Completed')
});

Explicació del codi:

  • Importació: Importem of i map de la llibreria rxjs.
  • Creació: Utilitzem of per crear un observable que emet els valors 1, 2 i 3.
  • Transformació: Utilitzem l'operador map per multiplicar cada valor per 2.
  • Subscripció: Ens subscrivim a l'observable per rebre els valors transformats.

Exercici pràctic

Exercici:

Crea un observable que emeti els números de l'1 al 5 amb un retard d'un segon entre cada emissió. Utilitza l'operador map per multiplicar cada número per 10 i subscriu-te a l'observable per imprimir els valors transformats.

Solució:

import { interval } from 'rxjs';
import { take, map } from 'rxjs/operators';

const observable = interval(1000).pipe(
  take(5),
  map(value => (value + 1) * 10)
);

observable.subscribe({
  next: value => console.log(value),
  error: err => console.error('Error: ' + err),
  complete: () => console.log('Completed')
});

Explicació del codi:

  • Importació: Importem interval, take i map de la llibreria rxjs.
  • Creació: Utilitzem interval per crear un observable que emet un valor cada segon.
  • Limitació: Utilitzem l'operador take per limitar l'emissió a 5 valors.
  • Transformació: Utilitzem l'operador map per multiplicar cada valor per 10.
  • Subscripció: Ens subscrivim a l'observable per rebre els valors transformats.

Conclusió

Els observables són una eina poderosa per gestionar fluxos de dades asíncrons a Angular. Hem après a crear observables, subscriure-s'hi i utilitzar operadors per transformar els fluxos de dades. Amb aquests coneixements, estem preparats per gestionar operacions asíncrones de manera eficient a les nostres aplicacions Angular.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

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