Angular Academy · Ders

Birleştirme İşleçleri

Akışları combineLatest ve forkJoin ile birleştirin.

Birleştirme İşleçleri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Akışlar neden birleştirilir

Gerçek uygulamalar birden çok eşzamansız kaynağı koordine eder: birkaç HTTP çağrısı, bir form değeriyle birlikte bir filtre veya bir tıklamayla birlikte en son durum. Birleştirme işleçleri, birden çok gözlemlenebiliri tek bir akışta birleştirir.

combineLatest

combineLatest, herhangi bir kaynak yayın yaptığında, tüm kaynaklar en az bir kez yayın yaptıktan sonra, her kaynaktan gelen en son değeri bir dizi olarak yayınlar.

import { combineLatest } from 'rxjs';

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

combineLatest kullanım alanı

Türetilmiş arayüz durumu için idealdir: bir arama terimini ve kategori filtresini birleştirerek sorgu oluşturabilirsiniz.

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

forkJoin

forkJoin, tüm kaynakların tamamlanmasını bekler ve ardından bunların son değerlerinden oluşan tek bir dizi yayınlar. RxJS'deki Promise.all karşılığıdır.

import { forkJoin } from 'rxjs';

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

forkJoin için dikkat edilmesi gerekenler

Kaynaklardan biri hiç tamamlanmazsa (örneğin bir aralık akışı) veya tamamlanmadan önce hata verirse forkJoin hiçbir şey yayınlamaz. HTTP istekleri gibi sonlu kaynaklar için kullanın.

merge

merge, birden çok gözlemlenebiliri tek bir akışta düzleştirir ve değerleri herhangi bir kaynaktan geldikleri sırayla yayınlar; değerleri eşleştirmez.

import { merge } from 'rxjs';

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

zip

zip, değerleri dizinlerine göre eşleştirir: önce her kaynağın 1. değerini, sonra 2. değerini ve bu şekilde devamını yayınlar. Bir sonraki değeri üretmeleri için tüm kaynakları bekler.

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, başlangıç değerini öne ekler; bu, her kaynak henüz yayın yapmadan önce combineLatest'in yayın yapabilmesini sağlar.

import { startWith } from 'rxjs';

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

withLatestFrom

withLatestFrom, yalnızca kaynak yayın yaptığında yayın yapar ve diğer gözlemlenebilirlerin en son değerlerini ekler. Akışı kaynak yönlendirir, diğerleri pasif kalır.

import { withLatestFrom } from 'rxjs';

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

Sıralı akışlar için concat

concat, her kaynağa sırayla abone olur ve yalnızca mevcut kaynak tamamlandıktan sonra bir sonrakine geçer. Akışların kesinlikle birbiri ardına çalışması gerektiğinde kullanın.

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, forkJoin ve zip karşılaştırması

combineLatest: Her yayında her kaynağın en son değeri.
forkJoin: Tümü tamamlandığında her kaynağın son değeri.
zip: Dizinlerine göre eşleştirilmiş değerler.
Sürekli güncellemelere, tek seferlik bir birleştirmeye veya kesin eşleştirmeye ihtiyaç duyup duymadığınıza göre seçim yapın.

Kısa Kontrol

Birleştirme işleçlerini ne kadar anladığınızı test edin.

Özet: Birleştirme İşleçleri

Birleştirme işleçleri, birden çok akışı koordine eder.

combineLatest: Her yayında her kaynağın en son değeri.
forkJoin: Tamamlanınca birleştirir (Promise.all benzeri).
merge: Tüm yayınları iç içe geçirir.
withLatestFrom: Kaynak tarafından yönlendirilen diğer akışların anlık görünümü.

Sırada: hata işleme işleçleri.

Sıkça Sorulan Sorular

“Birleştirme İşleçleri” dersi ücretsiz mi?

Evet — “Birleştirme İşleçleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Birleştirme İşleçleri” dersinde ne öğreneceğim?

Akışları combineLatest ve forkJoin ile birleştirin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Birleştirme İşleçleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön