Angular Academy · Pelajaran

Operator Kombinasi

Gabungkan aliran dengan combineLatest dan forkJoin.

Operator Kombinasi adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa aliran perlu digabungkan

Aplikasi nyata mengoordinasikan beberapa sumber asinkron: beberapa panggilan HTTP, nilai formulir beserta filter, atau klik beserta status terbaru. Operator kombinasi menggabungkan beberapa observable menjadi satu.

combineLatest

combineLatest menghasilkan larik berisi nilai terbaru dari setiap sumber setiap kali salah satu sumber menghasilkan nilai — setelah semua sumber menghasilkan nilai setidaknya sekali.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

Kasus penggunaan combineLatest

Sangat cocok untuk status UI turunan: gabungkan istilah pencarian dan filter kategori untuk menghasilkan kueri.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin menunggu semua sumber selesai, lalu menghasilkan satu larik berisi nilai terakhir dari masing-masing sumber. Operator ini merupakan padanan RxJS untuk Promise.all.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

Keterbatasan forkJoin

forkJoin tidak menghasilkan apa pun jika salah satu sumber tidak pernah selesai (seperti interval) atau mengalami kesalahan sebelum selesai. Gunakan operator ini untuk sumber terbatas, seperti permintaan HTTP.

merge

merge meratakan beberapa observable menjadi satu, dengan menghasilkan nilai saat nilai tersebut tiba dari sumber mana pun, tanpa memasangkan nilai.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip memasangkan nilai berdasarkan indeks: menghasilkan nilai pertama dari setiap sumber, lalu nilai kedua dari setiap sumber, dan seterusnya. Operator ini menunggu semua sumber menghasilkan nilai berikutnya.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith menambahkan nilai awal di bagian depan, sehingga combineLatest dapat menghasilkan nilai sebelum semua sumber menghasilkan nilai.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom hanya menghasilkan nilai saat sumber menghasilkan nilai, dengan menyertakan nilai terbaru dari observable lain. Sumber menjadi penggerak, sedangkan yang lain bersifat pasif.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat untuk aliran berurutan

concat berlangganan ke setiap sumber sesuai urutan, lalu berpindah ke sumber berikutnya hanya setelah sumber saat ini selesai. Gunakan operator ini saat aliran harus berjalan benar-benar satu per satu.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest vs forkJoin vs zip

combineLatest: nilai terbaru dari setiap sumber, setiap kali ada emisi.
forkJoin: nilai terakhir dari setiap sumber, satu kali setelah semuanya selesai.
zip: dipasangkan berdasarkan indeks.
Pilih berdasarkan kebutuhan Anda: pembaruan berkelanjutan, penggabungan satu kali, atau pemasangan yang ketat.

Pemeriksaan Cepat

Uji pemahaman Anda tentang operator kombinasi.

Ringkasan: Operator Kombinasi

Operator kombinasi mengoordinasikan beberapa aliran.

combineLatest: nilai terbaru dari setiap sumber saat ada emisi.
forkJoin: menggabungkan saat selesai (mirip Promise.all).
merge: menyelang-selingkan semua emisi.
withLatestFrom: cuplikan nilai sumber lain yang digerakkan oleh sumber utama.

Berikutnya: operator penanganan kesalahan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Operator Kombinasi” gratis?

Ya — teks lengkap “Operator Kombinasi” 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 “Operator Kombinasi”?

Gabungkan aliran dengan combineLatest dan forkJoin. 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 3 dari 4.

Berapa lama pelajaran “Operator Kombinasi” 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

← Kembali ke Angular Academy