0Pricing
Angular Academy · Pelajaran

Observable dan Subscription

Buat dan berlangganan aliran observable.

Observable dan Subscription adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Apa itu Observable

Observable adalah aliran nilai yang berjalan secara malas dari waktu ke waktu. Tidak ada yang terjadi sampai Anda melakukan subscribe. Observable dapat memancarkan nol atau beberapa nilai, lalu selesai atau mengalami error.

RxJS adalah pustaka reaktif yang disertakan Angular untuk menangani pekerjaan asinkron seperti HTTP, peristiwa, dan pewaktu.

Membuat Observable

Konstruktor Observable menerima fungsi pelanggan. Anda memanggil next() untuk memancarkan nilai, complete() untuk menyelesaikan, dan error() saat terjadi kegagalan.

import { Observable } from 'rxjs';

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

Berlangganan

Berlangganan memulai eksekusi. Berikan pengamat dengan penangan 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 berjalan sampai subscribe() dipanggil. Setiap langganan memicu eksekusi baru yang independen (observable dingin).

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

Pembantu pembuatan: of dan from

Anda jarang menggunakan konstruktor. Pembantu seperti of dan from dapat membuat 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));

Pembuat interval dan timer

interval memancarkan angka yang terus bertambah sesuai jadwal; timer menunggu lalu 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

Di Angular, metode HttpClient mengembalikan Observable. Permintaan hanya dijalankan saat Anda melakukan subscribe.

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 sebuah Subscription. Panggil unsubscribe() untuk berhenti menerima nilai dan membebaskan sumber daya.

import { interval } from 'rxjs';

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

Penyelesaian vs berhenti berlangganan

Saat sebuah observable memanggil complete() atau error(), sumber dayanya dibersihkan secara otomatis. Untuk aliran tak terbatas (interval, peristiwa DOM), Anda harus berhenti berlangganan sendiri.

Bentuk singkat Observer

Jika Anda hanya memerlukan nilainya, berikan satu fungsi—fungsi itu akan menjadi penangan next.

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

Panas vs dingin (singkat)

Observable dingin mulai menghasilkan nilai saat di-subscribe, dan setiap subscriber mendapatkan eksekusinya sendiri (HTTP, of, interval). Observable panas menghasilkan nilai terlepas dari adanya subscriber dan membagikan nilai tersebut (selanjutnya kita akan membahas Subject).

Pemeriksaan Singkat

Uji pemahaman Anda tentang observable.

Ringkasan: Observable & Subscription

Observable adalah aliran malas yang Anda aktifkan dengan subscribe().

  • Pancarkan dengan next, selesaikan dengan complete, dan tandai kegagalan dengan error.
  • Metode HttpClient mengembalikan observable—metode tersebut dijalankan saat subscribe.
  • Berhenti berlangganan dari aliran tak terbatas untuk mencegah kebocoran.

Berikutnya: Subject dan BehaviorSubject.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Observable dan Subscription” gratis?

Ya — teks lengkap “Observable dan Subscription” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Observable dan Subscription”?

Buat dan berlangganan aliran observable. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Observable dan Subscription” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Observable dan Subscription
  2. Subject dan BehaviorSubject
  3. Berhenti Berlangganan dan Kebocoran Memori
  4. Pipe async
← Kembali ke Angular Academy