Angular Academy · Pelajaran

Operator Gabungan

Gabungkan strim dengan combineLatest dan forkJoin.

Pelajaran 3 daripada 413 langkah

Operator Gabungan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.

Sebab aliran digabungkan

Aplikasi sebenar menyelaraskan berbilang sumber tak segerak: beberapa panggilan HTTP, nilai borang bersama penapis, atau klik bersama keadaan terkini. Operator penggabungan mencantumkan beberapa aliran boleh diperhati menjadi satu.

combineLatest

combineLatest menghasilkan tatasusunan nilai terkini daripada setiap sumber apabila mana-mana sumber menghasilkan nilai — selepas semua sumber menghasilkan nilai sekurang-kurangnya sekali.

import { combineLatest } from 'rxjs';

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

Kes penggunaan combineLatest

Sangat sesuai untuk keadaan UI terbitan: gabungkan istilah carian dan penapis kategori untuk menghasilkan pertanyaan.

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 lengkap, kemudian menghasilkan satu tatasusunan nilai terakhir daripada setiap sumber. Ia ialah padanan RxJS bagi 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);
});

Kaveat forkJoin

forkJoin tidak menghasilkan apa-apa jika mana-mana sumber tidak pernah lengkap (seperti sela masa) atau mengalami ralat sebelum lengkap. Gunakannya untuk sumber terhingga seperti permintaan HTTP.

merge

merge meratakan beberapa aliran boleh diperhati menjadi satu, dengan menghasilkan nilai apabila nilai tiba daripada mana-mana sumber, tanpa pemadanan.

import { merge } from 'rxjs';

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

zip

zip memadankan nilai mengikut indeks: ia menghasilkan nilai pertama daripada setiap sumber, kemudian nilai kedua daripada setiap sumber, dan seterusnya. Ia menunggu semua sumber menghasilkan nilai seterusnya.

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 menambah nilai awal di hadapan, berguna supaya combineLatest boleh menghasilkan nilai sebelum setiap 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 apabila sumber menghasilkan nilai, sambil melampirkan nilai terkini daripada aliran boleh diperhati yang lain. Sumber memacu proses, manakala yang lain bersifat pasif.

import { withLatestFrom } from 'rxjs';

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

concat untuk aliran berjujukan

concat melanggan setiap sumber mengikut tertib, dan hanya beralih kepada sumber seterusnya selepas sumber semasa lengkap. Gunakannya apabila anda memerlukan aliran berjalan tepat satu demi 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 berbanding forkJoin berbanding zip

combineLatest: nilai terkini setiap sumber apabila mana-mana sumber menghasilkan nilai.
forkJoin: nilai terakhir setiap sumber, sekali selepas semua sumber lengkap.
zip: dipadankan mengikut indeks.
Pilih berdasarkan sama ada anda memerlukan kemas kini berterusan, penggabungan sekali sahaja atau pemadanan ketat.

Semakan Pantas

Uji pemahaman anda tentang operator penggabungan.

Jawab dalam pelajaran interaktif

Imbas Kembali: Operator Penggabungan

Operator penggabungan menyelaraskan berbilang aliran.

combineLatest: nilai terkini setiap sumber apabila mana-mana sumber menghasilkan nilai.
forkJoin: digabungkan apabila lengkap (seperti Promise.all).
merge: menyelang-selikan semua nilai terhasil.
withLatestFrom: gambaran nilai terkini yang dipacu oleh sumber.

Seterusnya: operator pengendalian ralat.

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 “Operator Gabungan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Operator Gabungan”, 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 “Operator Gabungan”?

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

Berapa lamakah pelajaran “Operator Gabungan” 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

← Kembali ke Angular Academy