Angular Academy · Pelajaran

Observable dan Langganan

Cipta dan langgan strim observable.

Pelajaran 1 daripada 413 langkah

Observable dan Langganan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah Observable

Observable ialah aliran nilai secara malas mengikut masa. Tiada apa-apa berlaku sehingga anda subscribe. Ia boleh memancarkan sifar atau lebih nilai, kemudian sama ada selesai atau menghasilkan ralat.

RxJS ialah pustaka reaktif yang disertakan bersama Angular untuk mengendalikan kerja tak segerak seperti HTTP, peristiwa dan pemasa.

Mencipta Observable

Pembina Observable menerima fungsi pelanggan. Panggil next() untuk memancarkan nilai, complete() untuk menamatkan, dan error() untuk menandakan kegagalan.

import { Observable } from 'rxjs';

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

Melanggan

Langganan memulakan pelaksanaan. Hantar pemerhati dengan pengendali next, error dan complete.

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

Observable bersifat malas

Fungsi pelanggan tidak dijalankan sehingga subscribe() dipanggil. Setiap langganan mencetuskan pelaksanaan baharu yang berasingan (observable sejuk).

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

Pembantu penciptaan: of dan from

Anda jarang menggunakan pembina secara terus. Pembantu seperti of dan from mencipta observable dengan cepat.

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));

Pencipta interval dan timer

interval memancarkan nombor yang meningkat mengikut jadual; timer menunggu kemudian memancarkan nilai.

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 mengembalikan Observable

Dalam Angular, kaedah HttpClient mengembalikan Observable. Permintaan hanya dihantar apabila anda melanggan.

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

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

Objek Subscription

subscribe() mengembalikan Subscription. Panggil unsubscribe() untuk berhenti menerima nilai dan membebaskan sumber.

import { interval } from 'rxjs';

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

Penyelesaian berbanding pembatalan langganan

Apabila observable memanggil complete() atau error(), ia membersihkan sumber secara automatik. Untuk aliran tanpa penghujung (interval, peristiwa DOM), anda mesti membatalkan langganan sendiri.

Bentuk ringkas pemerhati

Jika anda hanya memerlukan nilai, hantar satu fungsi — fungsi itu akan menjadi pengendali next.

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

Panas berbanding sejuk (ringkas)

Observable sejuk mula menghasilkan nilai apabila dilanggan dan setiap pelanggan mendapat pelaksanaan sendiri (HTTP, of, interval). Observable panas terus menghasilkan nilai tanpa mengira pelanggan dan berkongsi nilai tersebut (kita akan mempelajari Subject selepas ini).

Semakan Ringkas

Uji pemahaman anda tentang observable.

Jawab dalam pelajaran interaktif

Imbas Kembali: Observable & Subscription

Observable ialah aliran malas yang diaktifkan dengan subscribe().

Pancarkan dengan next, tamatkan dengan complete, dan tandakan kegagalan dengan error.
Kaedah HttpClient mengembalikan observable — kaedah tersebut dihantar apabila dilanggan.
Batalkan langganan aliran tanpa penghujung untuk mengelakkan kebocoran.

Seterusnya: Subject dan BehaviorSubject.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Observable dan Langganan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Observable dan Langganan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Observable dan Langganan”?

Cipta dan langgan strim observable. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Observable dan Langganan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Observable dan Langganan
Subject dan BehaviorSubject
Membatalkan Langganan dan Kebocoran Memori
Pipe async

← Kembali ke Angular Academy