Modern web uygulamalar\u0131, kullan\u0131c\u0131 etkile\u015fimleri, veri ak\u0131\u015flar\u0131 ve zaman uyumsuz i\u015flemlerle dolu karma\u015f\u0131k ortamlard\u0131r. Bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in reaktif programlama paradigmas\u0131 ve \u00f6zellikle RxJS (Reactive Extensions for JavaScript) gibi k\u00fct\u00fcphaneler geli\u015ftirilmi\u015ftir. RxJS, olaylar\u0131, API \u00e7a\u011fr\u0131lar\u0131n\u0131 ve di\u011fer zaman uyumsuz veri kaynaklar\u0131n\u0131 “Observable” ad\u0131 verilen g\u00f6zlemlenebilir ak\u0131\u015flar olarak ele alarak, bu ak\u0131\u015flar \u00fczerinde g\u00fc\u00e7l\u00fc ve deklaratif bir \u015fekilde i\u015flem yapmam\u0131z\u0131 sa\u011flar.<\/p>\n
Observable’lar, zamanla birden fazla de\u011fer yayan veya hi\u00e7 de\u011fer yaymadan tamamlanabilen veya hata verebilen veri kaynaklar\u0131d\u0131r. RxJS’in g\u00fcc\u00fc, bu Observable’lar \u00fczerinde i\u015flem yapmam\u0131z\u0131 sa\u011flayan zengin operat\u00f6r setinden gelir. Bu operat\u00f6rler, Observable’lar\u0131 d\u00f6n\u00fc\u015ft\u00fcrmek, filtrelemek, birle\u015ftirmek veya yan etkiler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Bu makalede, RxJS’in en s\u0131k kullan\u0131lan ve zaman zaman kar\u0131\u015ft\u0131r\u0131labilen d\u00f6rt birle\u015ftirme operat\u00f6r\u00fcn\u00fc derinlemesine inceleyece\u011fiz: \u00c7o\u011fu zaman, uygulamalar\u0131m\u0131zda birden fazla zaman uyumsuz veri kayna\u011f\u0131n\u0131 ayn\u0131 anda veya belirli bir mant\u0131k dahilinde birle\u015ftirmemiz gerekir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n profilini g\u00f6stermek i\u00e7in hem kullan\u0131c\u0131 bilgilerini hem de son sipari\u015flerini getiren iki farkl\u0131 API \u00e7a\u011fr\u0131s\u0131n\u0131 beklememiz gerekebilir. Veya bir formdaki birden fazla giri\u015f alan\u0131n\u0131n de\u011ferlerini ayn\u0131 anda izleyerek bir butonu etkinle\u015ftirmemiz gerekebilir. \u0130\u015fte bu gibi senaryolarda E\u011fer girdi olarak verilen Observable’lardan herhangi biri tamamlanmadan \u00f6nce bir hata yayarsa, * Tamamlanma \u015eart\u0131:<\/strong> Bu operat\u00f6r, Observable’lar aras\u0131nda bir “senkronizasyon” veya “e\u015fle\u015ftirme” mekanizmas\u0131 sa\u011flar. Bir Observable di\u011ferlerinden daha h\u0131zl\u0131 de\u011fer yayarsa, * E\u015fle\u015fme Kural\u0131:<\/strong> * \u0130lk Emisyon Ko\u015fulu:<\/strong> \u0130lk Emisyon Ko\u015fulu:<\/strong> Bu d\u00f6rt operat\u00f6r\u00fcn her biri, birden fazla Observable’\u0131 birle\u015ftirme amac\u0131na hizmet eder, ancak bunu farkl\u0131 tetikleyiciler ve stratejilerle yaparlar. Do\u011fru operat\u00f6r\u00fc se\u00e7mek, uygulaman\u0131z\u0131n mant\u0131\u011f\u0131n\u0131 do\u011fru bir \u015fekilde ifade etmek ve beklenmedik davran\u0131\u015flardan ka\u00e7\u0131nmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n A\u015fa\u011f\u0131daki tablo, bu operat\u00f6rlerin temel \u00f6zelliklerini \u00f6zetlemektedir:<\/p>\n | \u00d6zellik | * * * * RxJS’in Bu operat\u00f6rleri do\u011fru bir \u015fekilde anlamak ve uygulamalar\u0131n\u0131zda bilin\u00e7li bir \u015fekilde kullanmak, daha temiz, daha \u00f6ng\u00f6r\u00fclebilir ve bak\u0131m\u0131 daha kolay reaktif kod yazman\u0131za olanak tan\u0131r. Uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131n\u0131 dikkatlice analiz ederek ve her bir operat\u00f6r\u00fcn tetikleme mekanizmas\u0131n\u0131, de\u011fer yayma stratejisini ve tamamlanma ko\u015fullar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurarak, RxJS’in sundu\u011fu bu zenginli\u011fi en verimli \u015fekilde kullanabilirsiniz. Unutmay\u0131n, reaktif programlama bir zihniyet de\u011fi\u015fikli\u011fi gerektirir ve bu operat\u00f6rler, bu zihniyeti uygulamaya d\u00f6kmenin temel ta\u015flar\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"RxJS Operat\u00f6rlerini Anlamak: forkJoin, zip, combineLatest ve withLatestFrom\nGiri\u015f: Reaktif Programlama ve RxJS\nModern web uygulamalar\u0131, kullan\u0131c","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34680","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nforkJoin<\/code>, zip<\/code>, combineLatest<\/code> ve withLatestFrom<\/code>. Her bir operat\u00f6r\u00fcn ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi senaryolarda kullan\u0131lmas\u0131 gerekti\u011fini, \u00f6rnek kodlarla ve kar\u015f\u0131la\u015ft\u0131rmal\u0131 analizlerle a\u00e7\u0131klayaca\u011f\u0131z. Bu sayede, uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na en uygun operat\u00f6r\u00fc se\u00e7me konusunda daha bilin\u00e7li kararlar verebileceksiniz.<\/p>\nRxJS Operat\u00f6rleri: Birle\u015ftirme ve Senkronizasyon<\/h3>\n
forkJoin<\/code>, zip<\/code>, combineLatest<\/code> ve withLatestFrom<\/code> gibi birle\u015ftirme operat\u00f6rleri devreye girer. Her birinin farkl\u0131 bir birle\u015ftirme stratejisi ve kullan\u0131m amac\u0131 vard\u0131r.<\/p>\nforkJoin: T\u00fcm Ak\u0131\u015flar\u0131n Tamamlanmas\u0131n\u0131 Beklemek<\/h3>\n
Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
forkJoin<\/code>, bir veya daha fazla Observable’\u0131 girdi olarak alan bir RxJS operat\u00f6r\u00fcd\u00fcr. Temel prensibi \u015fudur: kendisine verilen t\u00fcm Observable’lar\u0131n tamamlanmas\u0131n\u0131 bekler. T\u00fcm Observable’lar ba\u015far\u0131yla tamamland\u0131\u011f\u0131nda, her bir Observable’dan yay\u0131lan son<\/em> de\u011ferleri bir dizi veya bir nesne olarak birle\u015ftirir ve tek bir de\u011fer olarak yayar. Bu operat\u00f6r, Promise.all() fonksiyonunun Observable kar\u015f\u0131l\u0131\u011f\u0131 olarak d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\nforkJoin<\/code> an\u0131nda bu hatay\u0131 yayar ve di\u011fer Observable’lar\u0131 iptal eder. Ayr\u0131ca, e\u011fer bir Observable hi\u00e7 de\u011fer yaymadan tamamlan\u0131rsa, forkJoin<\/code> bu Observable i\u00e7in tan\u0131ms\u0131z (undefined) bir de\u011fer d\u00f6nd\u00fcrecektir. Bu nedenle, forkJoin<\/code> kullan\u0131rken t\u00fcm Observable’lar\u0131n en az bir de\u011fer yayd\u0131\u011f\u0131ndan ve sonunda tamamland\u0131\u011f\u0131ndan emin olmak \u00f6nemlidir.<\/p>\nKullan\u0131m Senaryolar\u0131<\/h4>\n
forkJoin<\/code> genellikle \u015fu senaryolarda tercih edilir:
\n* Paralel API \u00c7a\u011fr\u0131lar\u0131:<\/strong> Bir sayfay\u0131 y\u00fcklemek i\u00e7in birden fazla ba\u011f\u0131ms\u0131z API \u00e7a\u011fr\u0131s\u0131 yapman\u0131z ve t\u00fcm verilerin gelmesini bekleyip tek bir g\u00f6r\u00fcn\u00fcmde birle\u015ftirmeniz gerekti\u011finde. \u00d6rne\u011fin, bir \u00fcr\u00fcn detay sayfas\u0131nda \u00fcr\u00fcn bilgisi, stok durumu ve m\u00fc\u015fteri yorumlar\u0131 gibi farkl\u0131 verileri ayn\u0131 anda \u00e7ekmek.
\n* Sabit Veri Setleri:<\/strong> Birka\u00e7 ba\u011f\u0131ms\u0131z ve tamamlanacak veri kayna\u011f\u0131n\u0131 birle\u015ftirmeniz gerekti\u011finde. \u00d6rne\u011fin, bir rapor olu\u015fturmak i\u00e7in farkl\u0131 veri k\u00fcmelerini ayn\u0131 anda y\u00fcklemek.
\n* Ba\u015flang\u0131\u00e7 Verileri:<\/strong> Uygulama ba\u015flang\u0131c\u0131nda veya belirli bir bile\u015fenin y\u00fcklenmesinde gerekli olan t\u00fcm ba\u015flang\u0131\u00e7 verilerini toplamak.<\/p>\n\u00d6rnek Kullan\u0131m<\/h4>\n
import { forkJoin, of, timer, throwError } from 'rxjs';\nimport { delay, take } from 'rxjs\/operators';\n\nconsole.log('forkJoin \u00d6rne\u011fi Ba\u015flad\u0131...');\n\n\/\/ 1. Basit Ba\u015far\u0131l\u0131 Senaryo\nconst kaynak1 = of('A').pipe(delay(1000)); \/\/ 1 saniye sonra 'A' yayar ve tamamlan\u0131r\nconst kaynak2 = of('B').pipe(delay(2000)); \/\/ 2 saniye sonra 'B' yayar ve tamamlan\u0131r\nconst kaynak3 = of('C').pipe(delay(500)); \/\/ 0.5 saniye sonra 'C' yayar ve tamamlan\u0131r\n\nforkJoin([kaynak1, kaynak2, kaynak3]).subscribe(\n degerler => console.log('Ba\u015far\u0131l\u0131 forkJoin (Dizi):', degerler), \/\/ ['A', 'B', 'C']\n hata => console.error('Hata:', hata),\n () => console.log('Ba\u015far\u0131l\u0131 forkJoin tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131 (2 saniye sonra):\n\/\/ Ba\u015far\u0131l\u0131 forkJoin (Dizi): [ 'A', 'B', 'C' ]\n\/\/ Ba\u015far\u0131l\u0131 forkJoin tamamland\u0131.\n\n\/\/ 2. Nesne Destructuring ile Kullan\u0131m\nconst kullaniciApi = of({ id: 1, ad: 'Ali' }).pipe(delay(1500));\nconst siparisApi = of([{ urun: 'Kitap' }, { urun: 'Kalem' }]).pipe(delay(1000));\n\nforkJoin({\n kullanici: kullaniciApi,\n siparisler: siparisApi\n}).subscribe(\n veri => console.log('Ba\u015far\u0131l\u0131 forkJoin (Nesne):', veri),\n hata => console.error('Hata:', hata),\n () => console.log('Nesne forkJoin tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131 (1.5 saniye sonra):\n\/\/ Ba\u015far\u0131l\u0131 forkJoin (Nesne): { kullanici: { id: 1, ad: 'Ali' }, siparisler: [ { urun: 'Kitap' }, { urun: 'Kalem' } ] }\n\/\/ Nesne forkJoin tamamland\u0131.\n\n\/\/ 3. Hata Senaryosu\nconst hataKaynak = throwError(() => new Error('API Hatas\u0131')).pipe(delay(2500));\nconst kaynak4 = of('D').pipe(delay(500));\n\nforkJoin([kaynak4, hataKaynak]).subscribe(\n degerler => console.log('Hatal\u0131 forkJoin (Dizi):', degerler),\n hata => console.error('Hata Senaryosu:', hata.message), \/\/ API Hatas\u0131\n () => console.log('Hatal\u0131 forkJoin tamamland\u0131.') \/\/ Bu mesaj \u00e7al\u0131\u015fmaz\n);\n\n\/\/ \u00c7\u0131kt\u0131 (2.5 saniye sonra):\n\/\/ Hata Senaryosu: API Hatas\u0131\n\n\/\/ 4. Uzun S\u00fcre Yayan Observable ile Senaryo (take operat\u00f6r\u00fc olmadan asla tamamlanmaz)\n\/\/ const uzunYayanKaynak = timer(0, 1000); \/\/ Her saniye bir de\u011fer yayar, asla tamamlanmaz\n\n\/\/ forkJoin([kaynak1, uzunYayanKaynak]).subscribe(\n\/\/ degerler => console.log('Uzun Yayan forkJoin:', degerler),\n\/\/ hata => console.error('Hata:', hata),\n\/\/ () => console.log('Uzun Yayan forkJoin tamamland\u0131.')\n\/\/ );\n\/\/ Yukar\u0131daki kod hi\u00e7bir zaman \u00e7\u0131kt\u0131 vermez, \u00e7\u00fcnk\u00fc uzunYayanKaynak asla tamamlanmaz.\n\/\/ forkJoin'in \u00e7al\u0131\u015fmas\u0131 i\u00e7in t\u00fcm kaynaklar\u0131n tamamlanmas\u0131 gerekir.\n\/\/ E\u011fer uzunYayanKaynak.pipe(take(1)) gibi bir operat\u00f6r eklenirse \u00e7al\u0131\u015f\u0131r.<\/code><\/pre>\nDikkat Edilmesi Gerekenler<\/h4>\n
forkJoin<\/code>‘in de\u011fer yayabilmesi i\u00e7in t\u00fcm girdi Observable’lar\u0131n\u0131n tamamlanmas\u0131 zorunludur. E\u011fer bir Observable asla tamamlanmazsa (\u00f6rne\u011fin, interval<\/code> veya fromEvent<\/code> gibi operat\u00f6rlerle olu\u015fturulan Observable’lar take<\/code> veya takeUntil<\/code> gibi bir tamamlama operat\u00f6r\u00fc olmadan), forkJoin<\/code> da asla de\u011fer yaymaz veya tamamlanmaz.
\n* Hata Y\u00f6netimi:<\/strong> Herhangi bir Observable hata yayarsa, forkJoin<\/code> hemen bu hatay\u0131 yayar ve aboneli\u011fi sonland\u0131r\u0131r. Bu, hatalar\u0131 merkezi bir yerde y\u00f6netmek i\u00e7in kullan\u0131\u015fl\u0131 olabilir, ancak bazen k\u0131smi ba\u015far\u0131lar\u0131 ele almak isteyebilirsiniz. Bu durumda, catchError<\/code> gibi operat\u00f6rlerle her bir Observable’\u0131 ayr\u0131 ayr\u0131 ele alman\u0131z gerekebilir.
\n Son De\u011fer:<\/strong> Yaln\u0131zca her bir Observable’dan yay\u0131lan <\/em>son* de\u011ferler birle\u015ftirilir. Ara de\u011ferler g\u00f6z ard\u0131 edilir.<\/p>\nzip: De\u011ferleri S\u0131rayla E\u015fle\u015ftirmek<\/h3>\n
Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
zip<\/code>, kendisine verilen Observable’lardan gelen de\u011ferleri, yay\u0131lma s\u0131ras\u0131na g\u00f6re e\u015fle\u015ftiren bir birle\u015ftirme operat\u00f6r\u00fcd\u00fcr. zip<\/code> operat\u00f6r\u00fc, her bir Observable’dan birer de\u011fer ald\u0131\u011f\u0131nda, bu de\u011ferleri bir dizi veya belirtilen bir projeksiyon fonksiyonu arac\u0131l\u0131\u011f\u0131yla birle\u015ftirir ve yeni bir de\u011fer olarak yayar. Bir sonraki birle\u015ftirmeyi yapabilmek i\u00e7in, her bir Observable’dan tekrar birer de\u011fer gelmesini bekler.<\/p>\nzip<\/code> di\u011fer Observable’lardan de\u011fer gelmesini bekleyene kadar i\u00e7 tamponunda bu fazla de\u011ferleri tutar. E\u011fer bir Observable di\u011ferlerinden daha az de\u011fer yayar ve tamamlan\u0131rsa, zip<\/code> i\u015flemi de o Observable’\u0131n tamamlanmas\u0131yla birlikte sona erer. Yani, en k\u0131sa Observable’\u0131n uzunlu\u011fu, zip<\/code> operat\u00f6r\u00fcn\u00fcn ka\u00e7 kez de\u011fer yayaca\u011f\u0131n\u0131 belirler.<\/p>\nKullan\u0131m Senaryolar\u0131<\/h4>\n
zip<\/code> genellikle \u015fu senaryolarda kullan\u0131l\u0131r:
\n* E\u015fle\u015fen Veri Ak\u0131\u015flar\u0131:<\/strong> Birden fazla ba\u011f\u0131ms\u0131z veri ak\u0131\u015f\u0131n\u0131n de\u011ferlerini s\u0131rayla birle\u015ftirmeniz gerekti\u011finde. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n t\u0131klama olaylar\u0131 ile her t\u0131klamada \u00e7ekilen verileri e\u015fle\u015ftirmek.
\n* Form Giri\u015fleri:<\/strong> Birden fazla form alan\u0131n\u0131n de\u011ferlerini ayn\u0131 anda izleyerek, her bir alan\u0131n e\u015fle\u015fen de\u011ferlerini birle\u015ftirmek (ancak combineLatest<\/code> daha s\u0131k kullan\u0131l\u0131r).
\n* S\u0131ral\u0131 \u0130\u015flemler:<\/strong> Bir dizi i\u015flemi belirli bir s\u0131raya g\u00f6re ve her ad\u0131mda farkl\u0131 bir Observable’dan veri alarak yapmak.
\n* \u00c7oklu Sayfaland\u0131rma:<\/strong> Bir API’den farkl\u0131 sayfalar\u0131 paralel olarak \u00e7ekip, her sayfan\u0131n verisini s\u0131ras\u0131yla i\u015flemek.<\/p>\n\u00d6rnek Kullan\u0131m<\/h4>\n
import { zip, of, interval, timer } from 'rxjs';\nimport { take, map } from 'rxjs\/operators';\n\nconsole.log('zip \u00d6rne\u011fi Ba\u015flad\u0131...');\n\n\/\/ 1. Basit Senaryo\nconst sayilar = of(1, 2, 3);\nconst harfler = of('A', 'B', 'C', 'D'); \/\/ Harfler Observable'\u0131 daha uzun\n\nzip(sayilar, harfler).subscribe(\n degerler => console.log('Basit zip:', degerler), \/\/ [1, 'A'], [2, 'B'], [3, 'C']\n hata => console.error('Hata:', hata),\n () => console.log('Basit zip tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Basit zip: [ 1, 'A' ]\n\/\/ Basit zip: [ 2, 'B' ]\n\/\/ Basit zip: [ 3, 'C' ]\n\/\/ Basit zip tamamland\u0131.\n\/\/ (D harfi e\u015fle\u015fecek bir say\u0131 bulamad\u0131\u011f\u0131 i\u00e7in g\u00f6z ard\u0131 edilir)\n\n\/\/ 2. Zaman Farkl\u0131l\u0131klar\u0131 ile Senaryo\nconst saniye = interval(1000).pipe(take(3)); \/\/ 0, 1, 2 de\u011ferlerini 1er saniye arayla yayar\nconst tiklama = timer(500, 2000).pipe(take(2), map(val => Click ${val + 1}<\/code>)); \/\/ 0.5s sonra Click 1, 2.5s sonra Click 2 yayar\n\nzip(saniye, tiklama).subscribe(\n degerler => console.log('Zaman Farkl\u0131l\u0131klar\u0131 ile zip:', degerler),\n hata => console.error('Hata:', hata),\n () => console.log('Zaman Farkl\u0131l\u0131klar\u0131 ile zip tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ (1 saniye sonra)\n\/\/ saniye: 0\n\/\/ (0.5 saniye sonra)\n\/\/ tiklama: Click 1\n\/\/ (zip ilk e\u015fle\u015fmeyi yapar)\n\/\/ Zaman Farkl\u0131l\u0131klar\u0131 ile zip: [ 0, 'Click 1' ]\n\n\/\/ (1.5 saniye sonra)\n\/\/ saniye: 1\n\/\/ (0.5 saniye sonra)\n\/\/ tiklama: Click 2\n\/\/ (zip ikinci e\u015fle\u015fmeyi yapar)\n\/\/ Zaman Farkl\u0131l\u0131klar\u0131 ile zip: [ 1, 'Click 2' ]\n\n\/\/ (1 saniye sonra)\n\/\/ saniye: 2\n\/\/ (tiklama Observable'\u0131 tamamland\u0131\u011f\u0131 i\u00e7in zip tamamlan\u0131r, saniye: 2 e\u015fle\u015femez)\n\/\/ Zaman Farkl\u0131l\u0131klar\u0131 ile zip tamamland\u0131.\n\n\/\/ 3. Projeksiyon Fonksiyonu ile Kullan\u0131m\nconst isimler = of('Ay\u015fe', 'Fatma', 'Mehmet');\nconst yaslar = of(25, 30, 35);\n\nzip(isimler, yaslar, (isim, yas) => ({ isim, yas }))\n .subscribe(\n kisi => console.log('Projeksiyon ile zip:', kisi),\n hata => console.error('Hata:', hata),\n () => console.log('Projeksiyon ile zip tamamland\u0131.')\n );\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Projeksiyon ile zip: { isim: 'Ay\u015fe', yas: 25 }\n\/\/ Projeksiyon ile zip: { isim: 'Fatma', yas: 30 }\n\/\/ Projeksiyon ile zip: { isim: 'Mehmet', yas: 35 }\n\/\/ Projeksiyon ile zip tamamland\u0131.<\/code><\/pre>\nDikkat Edilmesi Gerekenler<\/h4>\n
zip<\/code>, her bir Observable’dan s\u0131rayla birer de\u011fer alana kadar bekler. Bu, t\u00fcm Observable’lar\u0131n bir de\u011fer yayd\u0131\u011f\u0131ndan emin olmak i\u00e7in bir tamponlama mekanizmas\u0131 kullan\u0131r.
\n* En K\u0131sa Ak\u0131\u015f:<\/strong> zip<\/code> operat\u00f6r\u00fcn\u00fcn tamamlanmas\u0131, kendisine verilen en k\u0131sa Observable’\u0131n tamamlanmas\u0131yla ger\u00e7ekle\u015fir. Daha uzun Observable’lardan gelen fazla de\u011ferler g\u00f6z ard\u0131 edilir.
\n* Zamanlama:<\/strong> Observable’lar\u0131n de\u011fer yayma h\u0131zlar\u0131 farkl\u0131 olsa bile, zip<\/code> de\u011ferleri s\u0131ras\u0131na g\u00f6re e\u015fle\u015ftirecektir. Bu, zamanlamadan ziyade s\u0131raya odaklan\u0131lan durumlar i\u00e7in idealdir.
\n* Hata Y\u00f6netimi:<\/strong> forkJoin<\/code> gibi, zip<\/code> de herhangi bir Observable’dan gelen bir hatay\u0131 hemen yayar ve t\u00fcm abonelikleri sonland\u0131r\u0131r.<\/p>\ncombineLatest: En Son De\u011ferleri Birle\u015ftirmek<\/h3>\n
Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
combineLatest<\/code>, kendisine verilen Observable’lardan herhangi biri bir de\u011fer yayd\u0131\u011f\u0131nda, di\u011fer t\u00fcm Observable’lardan yay\u0131lan en son<\/em> de\u011ferleri birle\u015ftirerek yeni bir de\u011fer yayan bir operat\u00f6rd\u00fcr. Bu, dinamik ve s\u00fcrekli g\u00fcncellenen durumlar\u0131 izlemek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\ncombineLatest<\/code>‘in temel \u00f6zelli\u011fi \u015fudur:
\n1. \u0130lk Emisyon:<\/strong> Bir de\u011fer yayabilmesi i\u00e7in, kendisine verilen t\u00fcm<\/em> Observable’lar\u0131n en az birer de\u011fer yaym\u0131\u015f olmas\u0131 gerekir. Bu “ilk emisyon” ko\u015fulu sa\u011fland\u0131ktan sonra, herhangi bir Observable yeni bir de\u011fer yayd\u0131\u011f\u0131nda, combineLatest<\/code> hemen di\u011fer t\u00fcm Observable’lardan o anki en son de\u011ferleri alarak yeni bir birle\u015ftirilmi\u015f de\u011fer yayar.
\n2. S\u00fcrekli G\u00fcncelleme:<\/strong> Herhangi bir Observable yeni bir de\u011fer yayd\u0131\u011f\u0131nda, \u00e7\u0131kt\u0131 Observable’\u0131 da yeni bir de\u011fer yayar. Bu, s\u00fcrekli g\u00fcncellenen birle\u015fik bir duruma sahip olman\u0131z\u0131 sa\u011flar.<\/p>\ncombineLatest<\/code>, zip<\/code>‘ten farkl\u0131 olarak de\u011ferleri s\u0131rayla e\u015fle\u015ftirmez; her zaman her bir Observable’dan gelen en son<\/em> de\u011feri kullan\u0131r. forkJoin<\/code>‘den farkl\u0131 olarak ise Observable’lar\u0131n tamamlanmas\u0131n\u0131 beklemez, s\u00fcrekli olarak de\u011fer yaymaya devam edebilir (Observable’lar tamamlanana kadar veya abonelik sonlanana kadar).<\/p>\nKullan\u0131m Senaryolar\u0131<\/h4>\n
combineLatest<\/code> genellikle \u015fu senaryolarda tercih edilir:
\n* Dinamik UI Durumlar\u0131:<\/strong> Birden fazla form giri\u015f alan\u0131n\u0131n (\u00f6rne\u011fin, kullan\u0131c\u0131 ad\u0131, \u015fifre, e-posta) de\u011ferlerini izleyerek bir “G\u00f6nder” butonunun etkinli\u011fini y\u00f6netmek. Herhangi bir giri\u015f de\u011fi\u015fti\u011finde, di\u011ferlerinin en son de\u011ferleriyle birlikte yeni bir durum elde edilir.
\n* Filtreleme ve S\u0131ralama:<\/strong> Bir \u00fcr\u00fcn listesinin filtreleme se\u00e7enekleri (kategori, fiyat aral\u0131\u011f\u0131) ve s\u0131ralama se\u00e7enekleri (artan\/azalan) gibi birden fazla parametrenin birle\u015fimiyle g\u00fcncellenen bir veri ak\u0131\u015f\u0131 olu\u015fturmak. Herhangi bir filtre veya s\u0131ralama de\u011fi\u015fti\u011finde, liste yeniden hesaplan\u0131r.
\n* Ger\u00e7ek Zamanl\u0131 G\u00f6sterge Tablolar\u0131:<\/strong> Farkl\u0131 sens\u00f6rlerden veya veri kaynaklar\u0131ndan gelen verileri birle\u015ftirerek dinamik bir g\u00f6sterge tablosu olu\u015fturmak.
\n* Hesaplanan De\u011ferler:<\/strong> Birka\u00e7 ba\u011f\u0131ms\u0131z Observable’dan gelen de\u011ferlere dayanarak s\u00fcrekli olarak yeni bir de\u011fer hesaplamak.<\/p>\n\u00d6rnek Kullan\u0131m<\/h4>\n
import { combineLatest, of, interval, timer } from 'rxjs';\nimport { delay, take, startWith, map } from 'rxjs\/operators';\n\nconsole.log('combineLatest \u00d6rne\u011fi Ba\u015flad\u0131...');\n\n\/\/ 1. Basit Senaryo\nconst kaynakA = of('A1', 'A2').pipe(delay(1000)); \/\/ 1s sonra A1, sonra A2 yayar\nconst kaynakB = of('B1').pipe(delay(500)); \/\/ 0.5s sonra B1 yayar\n\ncombineLatest([kaynakA, kaynakB]).subscribe(\n degerler => console.log('Basit combineLatest:', degerler),\n hata => console.error('Hata:', hata),\n () => console.log('Basit combineLatest tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ (0.5 saniye sonra)\n\/\/ kaynakB: B1 yayar. kaynakA hen\u00fcz de\u011fer yaymad\u0131\u011f\u0131 i\u00e7in combineLatest beklemede.\n\/\/ (0.5 saniye daha sonra, toplam 1 saniye)\n\/\/ kaynakA: A1 yayar. Art\u0131k her iki Observable da bir de\u011fer yayd\u0131\u011f\u0131 i\u00e7in combineLatest ilk de\u011ferini yayar.\n\/\/ Basit combineLatest: [ 'A1', 'B1' ]\n\/\/ (kaynakA'dan A2 gelir, kaynakB'nin son de\u011feri hala B1)\n\/\/ Basit combineLatest: [ 'A2', 'B1' ]\n\/\/ (Her iki Observable da tamamland\u0131\u011f\u0131 i\u00e7in combineLatest de tamamlan\u0131r.)\n\/\/ Basit combineLatest tamamland\u0131.\n\n\/\/ 2. Form Giri\u015fleri Benzeri Senaryo\nconst kullaniciAdi$ = timer(0, 2000).pipe(\n map(i => Kullan\u0131c\u0131_${i}<\/code>),\n take(3),\n startWith(''), \/\/ Ba\u015flang\u0131\u00e7 de\u011feri ile combineLatest'in hemen ba\u015flamas\u0131n\u0131 sa\u011flar\n delay(100) \/\/ K\u00fc\u00e7\u00fck bir gecikme ekleyelim\n);\nconst sifre$ = timer(500, 2000).pipe(\n map(i => Sifre_${i}<\/code>),\n take(2),\n startWith(''), \/\/ Ba\u015flang\u0131\u00e7 de\u011feri ile combineLatest'in hemen ba\u015flamas\u0131n\u0131 sa\u011flar\n delay(50) \/\/ K\u00fc\u00e7\u00fck bir gecikme ekleyelim\n);\n\ncombineLatest([kullaniciAdi$, sifre$]).subscribe(\n ([kullaniciAdi, sifre]) => {\n const gecerli = kullaniciAdi.length > 0 && sifre.length > 0;\n console.log(Kullan\u0131c\u0131 Ad\u0131: ${kullaniciAdi}, \u015eifre: ${sifre}, Ge\u00e7erli: ${gecerli}<\/code>);\n },\n hata => console.error('Hata:', hata),\n () => console.log('Form combineLatest tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ (Hemen, startWith sayesinde)\n\/\/ Kullan\u0131c\u0131 Ad\u0131: , \u015eifre: , Ge\u00e7erli: false\n\/\/ (0.1 saniye sonra, kullaniciAdi$ ilk de\u011ferini yayar)\n\/\/ Kullan\u0131c\u0131 Ad\u0131: Kullan\u0131c\u0131_0, \u015eifre: , Ge\u00e7erli: false\n\/\/ (0.5 saniye sonra, sifre$ ilk de\u011ferini yayar)\n\/\/ Kullan\u0131c\u0131 Ad\u0131: Kullan\u0131c\u0131_0, \u015eifre: Sifre_0, Ge\u00e7erli: true\n\/\/ (2 saniye sonra, kullaniciAdi$ ikinci de\u011ferini yayar)\n\/\/ Kullan\u0131c\u0131 Ad\u0131: Kullan\u0131c\u0131_1, \u015eifre: Sifre_0, Ge\u00e7erli: true\n\/\/ (2 saniye sonra, sifre$ ikinci de\u011ferini yayar)\n\/\/ Kullan\u0131c\u0131 Ad\u0131: Kullan\u0131c\u0131_1, \u015eifre: Sifre_1, Ge\u00e7erli: true\n\/\/ (2 saniye sonra, kullaniciAdi$ \u00fc\u00e7\u00fcnc\u00fc de\u011ferini yayar)\n\/\/ Kullan\u0131c\u0131 Ad\u0131: Kullan\u0131c\u0131_2, \u015eifre: Sifre_1, Ge\u00e7erli: true\n\/\/ Form combineLatest tamamland\u0131.<\/code><\/pre>\nDikkat Edilmesi Gerekenler<\/h4>\n
combineLatest<\/code>‘in de\u011fer yaymaya ba\u015flamas\u0131 i\u00e7in t\u00fcm girdi Observable’lar\u0131n\u0131n en az birer de\u011fer yaym\u0131\u015f olmas\u0131 gerekir. E\u011fer bir Observable ba\u015flang\u0131\u00e7ta hi\u00e7 de\u011fer yaymazsa, startWith<\/code> operat\u00f6r\u00fc ile bir ba\u015flang\u0131\u00e7 de\u011feri vererek bu durumu a\u015fabilirsiniz.
\n* Her De\u011fi\u015fiklikte Tetiklenme:<\/strong> Herhangi bir girdi Observable’\u0131 yeni bir de\u011fer yayd\u0131\u011f\u0131nda, combineLatest<\/code> hemen yeni bir birle\u015ftirilmi\u015f de\u011fer yayar. Bu, s\u00fcrekli g\u00fcncellenen birle\u015fik durumlar i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr.
\n* Hata Y\u00f6netimi:<\/strong> forkJoin<\/code> ve zip<\/code> gibi, combineLatest<\/code> de herhangi bir girdi Observable’\u0131ndan gelen bir hatay\u0131 hemen yayar ve t\u00fcm abonelikleri sonland\u0131r\u0131r.
\n* Tamamlanma:<\/strong> combineLatest<\/code>, t\u00fcm girdi Observable’lar\u0131 tamamland\u0131\u011f\u0131nda tamamlan\u0131r. E\u011fer bir Observable asla tamamlanmazsa, combineLatest<\/code> de asla tamamlanmaz.<\/p>\nwithLatestFrom: Kaynak Ak\u0131\u015f\u0131 Tetikledi\u011finde Di\u011ferlerinden En Son De\u011feri Almak<\/h3>\n
Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
withLatestFrom<\/code>, di\u011ferlerinden farkl\u0131 olarak bir instance<\/em> operat\u00f6r\u00fcd\u00fcr, yani bir Observable’\u0131n pipe<\/code> metodu i\u00e7inde kullan\u0131l\u0131r. Bu operat\u00f6r, bir “kaynak” Observable’dan (\u00fczerinde withLatestFrom<\/code> uygulanan Observable) bir de\u011fer yay\u0131ld\u0131\u011f\u0131nda tetiklenir. Tetiklendi\u011finde, withLatestFrom<\/code> operat\u00f6r\u00fcne verilen “di\u011fer” Observable’lardan o anki en son<\/em> de\u011ferleri al\u0131r ve kaynak Observable’dan gelen de\u011ferle birlikte bir dizi olarak birle\u015ftirip yayar.<\/p>\ncombineLatest<\/code>‘ten temel fark\u0131 \u015fudur: combineLatest<\/code> herhangi bir Observable de\u011fer yayd\u0131\u011f\u0131nda tetiklenirken, withLatestFrom<\/code> sadece kaynak Observable de\u011fer yayd\u0131\u011f\u0131nda<\/em> tetiklenir. Di\u011fer Observable’lar kendi ba\u015flar\u0131na de\u011fer yayd\u0131klar\u0131nda, withLatestFrom<\/code> bir \u00e7\u0131kt\u0131 yaymaz; sadece en son de\u011ferlerini dahili olarak g\u00fcnceller ve kaynak Observable’\u0131n bir sonraki yaymas\u0131n\u0131 bekler.<\/p>\nKullan\u0131m Senaryolar\u0131<\/h4>\n
withLatestFrom<\/code> genellikle \u015fu senaryolarda tercih edilir:
\n* Kullan\u0131c\u0131 Eylemlerini Zenginle\u015ftirme:<\/strong> Bir kullan\u0131c\u0131n\u0131n bir butona t\u0131klama olay\u0131 (kaynak Observable) ile o anki form verilerini veya se\u00e7ili filtreleri (di\u011fer Observable’lar) birle\u015ftirmek. Kullan\u0131c\u0131 t\u0131klad\u0131\u011f\u0131nda, o anki ba\u011flam verileriyle birlikte t\u0131klama olay\u0131 i\u015flenir.
\n* Ba\u011flama Duyarl\u0131 \u0130\u015flemler:<\/strong> Bir Observable’dan gelen veriyi, ba\u015fka bir Observable’dan gelen ve daha yava\u015f de\u011fi\u015fen veya daha az s\u0131kl\u0131kla yay\u0131lan bir “ba\u011flam” veya “yap\u0131land\u0131rma” verisiyle birle\u015ftirmek.
\n* Durum Ba\u011f\u0131ml\u0131 Eylemler:<\/strong> Bir olay\u0131n (kaynak) ger\u00e7ekle\u015fti\u011fi anda, uygulaman\u0131n o anki durumunu (di\u011fer Observable) yakalamak.<\/p>\n\u00d6rnek Kullan\u0131m<\/h4>\n
import { of, interval, timer } from 'rxjs';\nimport { withLatestFrom, take, map, startWith } from 'rxjs\/operators';\n\nconsole.log('withLatestFrom \u00d6rne\u011fi Ba\u015flad\u0131...');\n\n\/\/ Kaynak Observable: Kullan\u0131c\u0131 t\u0131klamalar\u0131 gibi daha s\u0131k veya belirli olaylar\nconst tiklama$ = timer(0, 2000).pipe(\n map(i => T\u0131klama_${i + 1}<\/code>),\n take(3)\n);\n\n\/\/ Di\u011fer Observable: Kullan\u0131c\u0131 ayarlar\u0131, se\u00e7ili tema gibi daha yava\u015f de\u011fi\u015fen durumlar\nconst ayarlar$ = timer(0, 1000).pipe(\n map(i => Ayarlar_V${i + 1}<\/code>),\n take(5),\n startWith('Ayarlar_Varsay\u0131lan') \/\/ Ba\u015flang\u0131\u00e7 de\u011feri ile withLatestFrom'un hemen \u00e7al\u0131\u015fabilmesini sa\u011flar\n);\n\ntiklama$.pipe(\n withLatestFrom(ayarlar$)\n).subscribe(\n ([tiklama, ayarlar]) => console.log(T\u0131klama: ${tiklama}, G\u00fcncel Ayarlar: ${ayarlar}<\/code>),\n hata => console.error('Hata:', hata),\n () => console.log('withLatestFrom tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ (0 saniye)\n\/\/ ayarlar$: Ayarlar_Varsay\u0131lan yayar.\n\/\/ tiklama$: T\u0131klama_1 yayar. (Kaynak tetiklendi, ayarlar$'dan en son de\u011feri al\u0131r.)\n\/\/ T\u0131klama: T\u0131klama_1, G\u00fcncel Ayarlar: Ayarlar_Varsay\u0131lan\n\n\/\/ (1 saniye)\n\/\/ ayarlar$: Ayarlar_V1 yayar. (withLatestFrom bir \u015fey yaymaz, sadece i\u00e7 durumunu g\u00fcnceller.)\n\n\/\/ (2 saniye)\n\/\/ tiklama$: T\u0131klama_2 yayar. (Kaynak tetiklendi, ayarlar$'dan en son de\u011feri al\u0131r.)\n\/\/ T\u0131klama: T\u0131klama_2, G\u00fcncel Ayarlar: Ayarlar_V1\n\/\/ ayarlar$: Ayarlar_V2 yayar. (withLatestFrom bir \u015fey yaymaz.)\n\n\/\/ (3 saniye)\n\/\/ ayarlar$: Ayarlar_V3 yayar. (withLatestFrom bir \u015fey yaymaz.)\n\n\/\/ (4 saniye)\n\/\/ tiklama$: T\u0131klama_3 yayar. (Kaynak tetiklendi, ayarlar$'dan en son de\u011feri al\u0131r.)\n\/\/ T\u0131klama: T\u0131klama_3, G\u00fcncel Ayarlar: Ayarlar_V3\n\/\/ ayarlar$: Ayarlar_V4 yayar. (withLatestFrom bir \u015fey yaymaz.)\n\n\/\/ (5 saniye)\n\/\/ ayarlar$: Ayarlar_V5 yayar ve tamamlan\u0131r. (withLatestFrom bir \u015fey yaymaz.)\n\/\/ withLatestFrom tamamland\u0131. (Kaynak Observable da tamamland\u0131\u011f\u0131 i\u00e7in.)\n\n\/\/ 2. Projeksiyon Fonksiyonu ile Kullan\u0131m\nconst sepetUrunSayisi$ = interval(3000).pipe(\n map(i => i + 1),\n take(3),\n startWith(0)\n); \/\/ 0, 1, 2, 3\n\nconst kullaniciDurumu$ = interval(1000).pipe(\n map(i => (i % 2 === 0 ? '\u00c7evrimi\u00e7i' : '\u00c7evrimd\u0131\u015f\u0131')),\n take(7),\n startWith('Bilinmiyor')\n);\n\nsepetUrunSayisi$.pipe(\n withLatestFrom(kullaniciDurumu$, (urunSayisi, durum) => ({ urunSayisi, durum }))\n).subscribe(\n veri => console.log('Sepet ve Kullan\u0131c\u0131 Durumu:', veri),\n hata => console.error('Hata:', hata),\n () => console.log('Sepet ve Kullan\u0131c\u0131 Durumu tamamland\u0131.')\n);\n\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ (Hemen, sepetUrunSayisi$ ilk de\u011ferini yayar)\n\/\/ Sepet ve Kullan\u0131c\u0131 Durumu: { urunSayisi: 0, durum: 'Bilinmiyor' }\n\/\/ (1s) kullaniciDurumu$: '\u00c7evrimi\u00e7i'\n\/\/ (2s) kullaniciDurumu$: '\u00c7evrimd\u0131\u015f\u0131'\n\/\/ (3s) sepetUrunSayisi$: 1 yayar.\n\/\/ Sepet ve Kullan\u0131c\u0131 Durumu: { urunSayisi: 1, durum: '\u00c7evrimd\u0131\u015f\u0131' }\n\/\/ (3s) kullaniciDurumu$: '\u00c7evrimi\u00e7i'\n\/\/ (4s) kullaniciDurumu$: '\u00c7evrimd\u0131\u015f\u0131'\n\/\/ (5s) kullaniciDurumu$: '\u00c7evrimi\u00e7i'\n\/\/ (6s) sepetUrunSayisi$: 2 yayar.\n\/\/ Sepet ve Kullan\u0131c\u0131 Durumu: { urunSayisi: 2, durum: '\u00c7evrimi\u00e7i' }\n\/\/ (6s) kullaniciDurumu$: '\u00c7evrimd\u0131\u015f\u0131'\n\/\/ (7s) kullaniciDurumu$: '\u00c7evrimi\u00e7i'\n\/\/ Sepet ve Kullan\u0131c\u0131 Durumu tamamland\u0131.<\/code><\/pre>\nDikkat Edilmesi Gerekenler<\/h4>\n
withLatestFrom<\/code>‘un de\u011fer yayabilmesi i\u00e7in, kaynak Observable’\u0131n bir de\u011fer yaymas\u0131 ve ayn\u0131 zamanda kendisine verilen <\/em>t\u00fcm di\u011fer Observable’lar\u0131n da en az birer de\u011fer yaym\u0131\u015f olmas\u0131* gerekir. Bu nedenle, startWith<\/code> operat\u00f6r\u00fc di\u011fer Observable’lar i\u00e7in s\u0131kl\u0131kla kullan\u0131l\u0131r.
\n* Tetikleyici:<\/strong> Yaln\u0131zca kaynak Observable yeni bir de\u011fer yayd\u0131\u011f\u0131nda \u00e7\u0131kt\u0131 Observable’\u0131 bir de\u011fer yayar. Di\u011fer Observable’lar kendi ba\u015flar\u0131na de\u011fer yayd\u0131klar\u0131nda bir \u00e7\u0131kt\u0131 olu\u015fmaz.
\n* Hata Y\u00f6netimi:<\/strong> Kaynak Observable veya herhangi bir di\u011fer Observable bir hata yayarsa, withLatestFrom<\/code> hemen bu hatay\u0131 yayar ve t\u00fcm abonelikleri sonland\u0131r\u0131r.
\n* Tamamlanma:<\/strong> Kaynak Observable tamamland\u0131\u011f\u0131nda, withLatestFrom<\/code> da tamamlan\u0131r. Di\u011fer Observable’lar\u0131n tamamlanmas\u0131, kaynak Observable hala de\u011fer yay\u0131yorsa withLatestFrom<\/code>‘un tamamlanmas\u0131na neden olmaz, ancak o Observable’dan art\u0131k yeni en son de\u011ferler al\u0131namaz.<\/p>\nOperat\u00f6rlerin Kar\u015f\u0131la\u015ft\u0131r\u0131lmas\u0131 ve Do\u011fru Se\u00e7im<\/h3>\n
forkJoin<\/code> | zip<\/code> | combineLatest<\/code> | withLatestFrom<\/code> |
\n| :—————- | :———————————————- | :————————————————— | :—————————————————– | :———————————————– |
\n| Tetikleyici<\/strong> | T\u00fcm kaynaklar tamamland\u0131\u011f\u0131nda (bir kez). | T\u00fcm kaynaklar birer de\u011fer yayd\u0131\u011f\u0131nda (e\u015fle\u015fme ba\u015f\u0131na). | Herhangi bir kaynak de\u011fer yayd\u0131\u011f\u0131nda (t\u00fcm kaynaklar ilk de\u011ferini yayd\u0131ktan sonra). | Sadece kaynak Observable de\u011fer yayd\u0131\u011f\u0131nda. |
\n| Yay\u0131lan De\u011fer<\/strong> | Her Observable’dan son<\/em> de\u011fer. | Her Observable’dan e\u015fle\u015fen<\/em> de\u011fer. | Her Observable’dan en son<\/em> de\u011fer. | Kaynak Observable’dan gelen de\u011fer + di\u011ferlerinden en son<\/em> de\u011ferler. |
\n| \u00c7\u0131kt\u0131 Tipi<\/strong> | Dizi veya nesne (tek bir de\u011fer). | Dizi veya projeksiyon fonksiyonu \u00e7\u0131kt\u0131s\u0131. | Dizi veya projeksiyon fonksiyonu \u00e7\u0131kt\u0131s\u0131. | Dizi veya projeksiyon fonksiyonu \u00e7\u0131kt\u0131s\u0131. |
\n| Tamamlanma<\/strong> | T\u00fcm kaynaklar tamamland\u0131\u011f\u0131nda tamamlan\u0131r. | En k\u0131sa kaynak tamamland\u0131\u011f\u0131nda tamamlan\u0131r. | T\u00fcm kaynaklar tamamland\u0131\u011f\u0131nda tamamlan\u0131r. | Kaynak Observable tamamland\u0131\u011f\u0131nda tamamlan\u0131r. |
\n| Hata Durumu<\/strong> | Herhangi bir kaynak hata verirse hemen hata yayar. | Herhangi bir kaynak hata verirse hemen hata yayar. | Herhangi bir kaynak hata verirse hemen hata yayar. | Herhangi bir kaynak hata verirse hemen hata yayar. |
\n| Kullan\u0131m Yeri<\/strong> | Paralel API \u00e7a\u011fr\u0131lar\u0131, t\u00fcm verinin haz\u0131r olmas\u0131. | S\u0131ral\u0131 e\u015fle\u015ftirme, senkronizasyon. | Dinamik UI, form izleme, filtreleme. | Olaylar\u0131 ba\u011flamla zenginle\u015ftirme, durum yakalama. |<\/p>\nNe Zaman Hangisini Kullanmal\u0131?<\/h4>\n
forkJoin<\/code> kullan\u0131n, e\u011fer:<\/strong>
\n Birden fazla Observable’\u0131n tamamlanmas\u0131n\u0131 beklemek ve her birinden gelen <\/em>son* de\u011ferleri tek bir seferde almak istiyorsan\u0131z.
\n * T\u00fcm verilerin y\u00fcklenip haz\u0131r oldu\u011fundan emin olman\u0131z gereken “hepsi ya da hi\u00e7biri” senaryolar\u0131n\u0131z varsa (\u00f6rne\u011fin, bir sayfan\u0131n t\u00fcm ba\u015flang\u0131\u00e7 verileri).
\n * Promise.all() benzeri bir davran\u0131\u015f ar\u0131yorsan\u0131z.<\/p>\nzip<\/code> kullan\u0131n, e\u011fer:<\/strong>
\n Birden fazla Observable’dan gelen de\u011ferleri <\/em>s\u0131ras\u0131na g\u00f6re* e\u015fle\u015ftirmek istiyorsan\u0131z.
\n * Observable’lar aras\u0131nda bir “senkronizasyon noktas\u0131” olu\u015fturman\u0131z gerekiyorsa ve en k\u0131sa ak\u0131\u015f\u0131n bitiminde i\u015flemin sonlanmas\u0131 uygunsa.
\n * Her iki ak\u0131\u015f\u0131n da ayn\u0131 say\u0131da \u00f6\u011fe yayaca\u011f\u0131 veya e\u015fle\u015fmeyen \u00f6\u011felerin g\u00f6z ard\u0131 edilmesinin kabul edilebilir oldu\u011fu durumlarda.<\/p>\ncombineLatest<\/code> kullan\u0131n, e\u011fer:<\/strong>
\n Birden fazla Observable’dan gelen <\/em>en son* de\u011ferleri s\u00fcrekli olarak izlemek ve herhangi bir Observable de\u011fer yayd\u0131\u011f\u0131nda g\u00fcncellenmi\u015f birle\u015fik bir durum elde etmek istiyorsan\u0131z.
\n * Dinamik kullan\u0131c\u0131 aray\u00fczleri, form giri\u015flerinin validasyonu veya birden fazla filtrenin birle\u015fimi gibi s\u00fcrekli g\u00fcncellenen durumlar\u0131 y\u00f6netmeniz gerekiyorsa.
\n * T\u00fcm Observable’lar\u0131n ilk de\u011ferlerini yayd\u0131ktan sonra s\u00fcrekli olarak tetiklenmesini bekliyorsan\u0131z.<\/p>\nwithLatestFrom<\/code> kullan\u0131n, e\u011fer:<\/strong>
\n Belirli bir “kaynak” Observable’dan gelen bir olay\u0131, di\u011fer Observable’lardan gelen <\/em>o anki en son ba\u011flamsal verilerle* birle\u015ftirmek istiyorsan\u0131z.
\n * Di\u011fer Observable’lar\u0131n kendi ba\u015flar\u0131na bir \u00e7\u0131kt\u0131 tetiklemesini istemiyor, sadece kaynak Observable tetiklendi\u011finde onlar\u0131n en son durumunu kullanmak istiyorsan\u0131z.
\n * Bir kullan\u0131c\u0131 eylemini (kaynak) uygulama durum verileriyle (di\u011ferleri) zenginle\u015ftirmeniz gerekiyorsa.<\/p>\nSonu\u00e7<\/h3>\n
forkJoin<\/code>, zip<\/code>, combineLatest<\/code> ve withLatestFrom<\/code> operat\u00f6rleri, zaman uyumsuz veri ak\u0131\u015flar\u0131n\u0131 birle\u015ftirme ve senkronize etme konusunda g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Her bir operat\u00f6r\u00fcn kendine \u00f6zg\u00fc bir davran\u0131\u015f bi\u00e7imi ve belirli senaryolar i\u00e7in en uygun oldu\u011fu durumlar vard\u0131r.<\/p>\n