Angular Academy · Oppitunti

Observablit ja tilaukset

Luokaa observable-virtoja ja tilatkaa niitä.

Oppitunti 1/413 vaihetta

Observablit ja tilaukset on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on Observable

Observable on laiska arvojen virta ajan kuluessa. Mitään ei tapahdu, ennen kuin teet tilauksen. Se voi lähettää nolla tai useampia arvoja ja päättyä sitten normaalisti tai virheeseen.

RxJS on reaktiivinen kirjasto, jonka Angular toimittaa asynkronisten tehtävien, kuten HTTP-pyyntöjen, tapahtumien ja ajastinten, käsittelyyn.

Observablen luominen

Observable-konstruktori ottaa vastaan tilaajafunktion. Kutsumalla next()-funktiota lähetät arvon, complete()-funktiolla päätät virran ja error()-funktiolla ilmoitat virheestä.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Tilaaminen

Tilaaminen käynnistää suorittamisen. Välitä tarkkailija, jolla on next-, error- ja complete-käsittelijät.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Observables ovat laiskoja

Tilaajafunktio ei suoritu, ennen kuin subscribe()-funktiota kutsutaan. Jokainen tilaus käynnistää uuden, toisistaan riippumattoman suorituksen (kylmä observable).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Luontiapurit: of ja from

Konstruktoria käytetään harvoin. of- ja from-funktioiden kaltaiset apurit luovat observablen nopeasti.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

interval- ja timer-luontifunktiot

interval lähettää kasvavia lukuja aikataulun mukaan, kun taas timer odottaa ja lähettää sitten arvon.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient palauttaa Observableja

Angularissa HttpClient-metodit palauttavat Observableja. Pyyntö lähetetään vasta, kun siihen tilataan.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Subscription-objekti

subscribe() palauttaa Subscription-objektin. Lopeta arvojen vastaanottaminen ja vapauta resurssit kutsumalla unsubscribe()-funktiota.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Päättäminen ja tilauksen peruuttaminen

Kun observable suorittaa complete()- tai error()-kutsun, se siivoaa resurssinsa automaattisesti. Loputtomien virtojen, kuten intervalin ja DOM-tapahtumien, tilaus on peruutettava itse.

Observer-lyhytmuoto

Jos välität vain arvoista, anna yksi funktio — siitä tulee next-käsittelijä.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Kuuma ja kylmä (lyhyesti)

Kylmät observables-virrat alkavat tuottaa arvoja tilauksen yhteydessä, ja jokainen tilaaja saa oman suorituksensa (HTTP, of, interval). Kuumat observables-virrat tuottavat arvoja tilaajista riippumatta ja jakavat ne tilaajille (tutustumme seuraavaksi Subject-tyyppeihin).

Pikatarkistus

Testaa, kuinka hyvin ymmärrät observables-virtoja.

Vastaa interaktiivisessa oppitunnissa

Kertaus: Observables ja tilaukset

Observable on laiska virta, jonka aktivoit subscribe()-funktiolla.

Lähetä arvoja nextillä, päätä virta completella ja ilmoita virheestä errorilla.
HttpClient-metodit palauttavat observableja — pyyntö lähetetään tilauksen yhteydessä.
Peruuta loputtomien virtojen tilaukset muistivuotojen välttämiseksi.

Seuraavaksi: Subject ja BehaviorSubject.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Observablit ja tilaukset” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Observablit ja tilaukset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Observablit ja tilaukset”?

Luokaa observable-virtoja ja tilatkaa niitä. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Observablit ja tilaukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy