RxJS'de gözlemlenebilir, bir gözlemci oluşturmak ve onu değerlerin beklendiği kaynağa eklemek için kullanılan bir işlevdir. Örneğin, tıklamalar, bir DOM öğesinden gelen fare olayları veya bir Http isteği vb. gözlemlenebilir örneklerdir.
Başka bir deyişle, gözlemcinin, Observable ile etkileşim olduğunda çağrılan, geri çağırma işlevlerine sahip bir nesne olduğunu söyleyebilirsiniz. Örneğin, kaynak bir örnekle etkileşime girmiştir, örneğin düğme tıklaması, Http istek vb.
Gözlenebilirler aynı zamanda birden fazla değerden oluşan tembel Push koleksiyonları olarak da tanımlanabilir. Değerleri itmek için gözlemlenebilirlerin nasıl kullanıldığını anlamak için basit bir örnek görelim.
Aşağıdaki örneğe bakın:
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); Yukarıdaki örnekte, abone olunduğunda 10, 20, 30 değerlerini anında ve eşzamanlı olarak iten bir gözlemlenebilir vardır, ancak abone olma yöntemi çağrıldıktan sonra 40 değeri bir saniye sonra itilecektir.
Gözlemlenebilir olanı çağırmak ve yukarıdaki değerleri görmek istiyorsanız, ona abone olmanız gerekir. Aşağıdaki örneğe bakın:
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); Çıktı:
Yukarıdaki programı çalıştırdığımızda konsolda aşağıdaki sonucu elde edeceğiz:
Java'da yakalamayı deneyin
Gözlemlenebilirler fonksiyonların genellemeleridir
Gözlemlenebilirlerin tıklama, bir DOM öğesinden veya Http isteğinden gelen fare olayları vb. gibi davranan işlevler olduğunu biliyoruz, ancak gözlemlenebilirler EventEmitter'lara veya birden fazla değer için Promises'a benzemez. Bazı durumlarda, gözlemlenebilir öğeler RxJS Subjects kullanılarak çok noktaya yayın yapıldığında EventEmitter gibi davranabilir, ancak genellikle EventEmitter gibi davranmazlar.
Gözlemlenebilirler sıfır bağımsız değişkenli işlevler gibidir, ancak bunları birden çok değere izin verecek şekilde genelleştirirler.
Bunu net bir şekilde anlamak için bir örnek görelim.
Basit bir fonksiyon örneği:
function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); Çıktı:
Aşağıdaki çıktıyı göreceksiniz:
'Hello World!' 123 'Hello World!' 123
Aynı örneği Gözlemlenebilirler ile yazalım:
import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); Çıktı:
Yukarıdakiyle aynı çıktıyı göreceksiniz:
Bunu görebilirsiniz çünkü hem işlevler hem de Gözlemlenebilirler tembel hesaplamalardır. İşlevi çağırmazsanız console.log('Merhaba Dünya!') gerçekleşmez. Ayrıca, Observables'ı abone olarak 'çağırmazsanız' console.log('Merhaba Dünya!') gerçekleşmez.
Bir Gözlemlenebilirin Çalışması
Gözlemlenebilir bir olayda üç aşama vardır:
- Gözlemlenebilirler Yaratmak
- Observables'a abone olma
- Gözlemlenebilirleri Yürütme
Gözlemlenebilirler Yaratmak
Gözlenebilirler oluşturmanın iki yolu vardır:
- Gözlemlenebilir yapıcı yöntemini kullanma
- Gözlemlenebilir create() yöntemini kullanma
Gözlemlenebilir yapıcı yöntemini kullanma
Observable yapıcı yöntemini kullanarak bir gözlemlenebilir oluşturalım ve Observable'ın içinde bulunan abone.next yöntemini kullanarak 'Bu benim ilk Gözlemlenebilirim' mesajını ekleyelim.
testrx.js dosyası:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Observable'ı aşağıdaki gibi Observable.create() yöntemini kullanarak da oluşturabilirsiniz:
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Observables'a abone olma
Gözlemlenebilir bir şeye abone olmak, bir işlevi çağırmak gibidir. Verilerin teslim edileceği geri aramaları sağlar.
Aşağıdaki sözdizimini kullanarak bir gözlemlenebilire abone olabilirsiniz:
Sözdizimi:
observable.subscribe(x => console.log(x));
Abone olma ile yukarıdaki örneğe bakın:
testrx.js dosyası:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); Çıktı:
Gözlemlenebilirleri Yürütme
Abone olunduğunda bir gözlemlenebilir yürütülür. Genellikle bir gözlemciye bildirilen üç yöntem vardır:
Sonraki(): Bu yöntem sayı, dize, nesne vb. değerleri göndermek için kullanılır.
tamamlamak(): Bu yöntem herhangi bir değer göndermez. Gözlenebilirin tamamlandığını gösterir.
hata(): Bu yöntem, varsa hatayı bildirmek için kullanılır.
Her üç bildirimle de gözlemlenebilir olanı oluşturduğumuz bir örneğe bakalım ve bu örneği yürütelim:
testrx.js dosyası:
tcp ip modeli
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is my first Observable'); subscriber.next('Testing Observable'); subscriber.complete(); } catch(e){ subscriber.error(e); } } ); observer.subscribe(x => console.log(x), (e)=>console.log(e), ()=>console.log('Observable is completed now.')); Hata yöntemi yalnızca bir hata olması durumunda çağrılır. Yukarıdaki kodu çalıştırdığınızda konsolda aşağıdaki çıktıyı göreceksiniz.
Çıktı:
