Angular Academy · Ders

Gözlemlenebilirler ve Abonelikler

Gözlemlenebilir akışlar oluşturun ve bunlara abone olun.

Gözlemlenebilirler ve Abonelikler, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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.

Observable Nedir

Observable, zaman içinde değerlerden oluşan tembel bir akıştır. subscribe edene kadar hiçbir şey gerçekleşmez. Sıfır veya daha fazla değer yayımlayabilir; ardından tamamlanabilir ya da hata verebilir.

RxJS, Angular'ın HTTP, olaylar ve zamanlayıcılar gibi eşzamansız işleri yönetmek için sunduğu reaktif kütüphanedir.

Observable Oluşturma

Observable oluşturucusu bir abone işlevi alır. Değer yayımlamak için next(), tamamlamak için complete(), başarısız olmak için error() çağrılır.

import { Observable } from 'rxjs';

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

Abone Olma

Abone olmak yürütmeyi başlatır. next, error ve complete işleyicilerini içeren bir gözlemci aktarın.

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'lar Tembeldir

Abone işlevi, subscribe() çağrılana kadar çalışmaz. Her abonelik yeni ve bağımsız bir yürütme başlatır (soğuk observable).

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

Oluşturma yardımcıları: of ve from

Oluşturucuyu nadiren kullanırsınız. of ve from gibi yardımcılar observable'ları hızlıca oluşturur.

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));

interval ve timer Oluşturucuları

interval, belirli bir zamanlamaya göre artan sayılar yayımlar; timer ise bekledikten sonra bir değer yayımlar.

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 Observable Döndürür

Angular'da HttpClient yöntemleri Observable döndürür. İstek yalnızca abone olduğunuzda gönderilir.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Subscription Nesnesi

subscribe() bir Subscription döndürür. Değerleri almayı durdurmak ve kaynakları serbest bırakmak için unsubscribe() çağırın.

import { interval } from 'rxjs';

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

Tamamlanma ve Abonelikten Çıkma

Bir observable complete() veya error() durumuna geldiğinde kaynaklarını otomatik olarak temizler. Sonsuz akışlarda (interval ve DOM olayları) abonelikten kendiniz çıkmanız gerekir.

Gözlemci Kısa Yazımı

Yalnızca değerlerle ilgileniyorsanız tek bir işlev aktarabilirsiniz; bu işlev next işleyicisine dönüşür.

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

Sıcak ve Soğuk Akışlar (Kısaca)

Soğuk observable'lar abone olunduğunda değer üretmeye başlar ve her abone kendi yürütmesini alır (HTTP, of, interval). Sıcak observable'lar abonelerden bağımsız olarak değer üretir ve bu değerleri paylaşır (bir sonraki bölümde Subject'leri göreceğiz).

Kısa Kontrol

Observable'lar hakkındaki anlayışınızı sınayın.

Özet: Observable'lar ve Abonelikler

Observable, subscribe() ile etkinleştirdiğiniz tembel bir akıştır.

next ile değer yayımlayın, complete ile tamamlayın, error ile başarısız olun.
HttpClient yöntemleri observable döndürür; bunlar abonelik sırasında çalışır.
Sızıntıları önlemek için sonsuz akışlardan abonelikten çıkın.

Sırada: Subject'ler ve BehaviorSubject.

Sıkça Sorulan Sorular

“Gözlemlenebilirler ve Abonelikler” dersi ücretsiz mi?

Evet — “Gözlemlenebilirler ve Abonelikler” 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.

“Gözlemlenebilirler ve Abonelikler” dersinde ne öğreneceğim?

Gözlemlenebilir akışlar oluşturun ve bunlara abone olun. 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 1. dersidir.

“Gözlemlenebilirler ve Abonelikler” 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