İçinde Gözlemlenebilir abonelik bulunan işlevden değer nasıl döndürülür?

Gözlemlenebilir'in mevcut olduğu işlev tarafından döndürülecek olan Gözlemlenebilir'den nasıl değer çıkaracağımı bilmiyorum. İade edilmesi için ondan sadece bir değere ihtiyacım var, başka bir şey yok

Çalışan mevcut sürüm

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            console.log(data)
        }
    )
}
getValueFromObservable()

Bunun çalışması için buna ihtiyacım var, değer döndürmek için işlev ve sonra:

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            return data
        }
    )
}
console.log(getValueFromObservable())

Burada neyi yanlış yapıyorum?

DÜZENLEME: RXJS'nin daha yeni sürümlerinde boruların çalışma biçiminde yapılan değişiklikleri yansıtmak için güncellenmiş kod. Tüm operatörler (benim örneğimi ele alalım) artık pipe () operatörüne sarılmıştır.

Bu sorunun epey bir zaman önce olduğunu ve şimdiye kadar kesinlikle uygun bir çözüme sahip olduğunuzun farkındayım, ancak bunu arayan herhangi biri için asenkron kalıbı korumak için bir Sözle çözmeyi öneririm.

Daha ayrıntılı bir versiyon, yeni bir Promise yaratmak olacaktır:

function getValueFromObservable() {
    return new Promise(resolve=>{
        this.store.pipe(
           take(1) //useful if you need the data once and don't want to manually cancel the subscription again
         )
         .subscribe(
            (data:any) => {
                console.log(data);
                resolve(data);
         })
    })
}

Alıcı tarafta, sözün şu şekilde çözülmesi için "bekle" ye sahip olacaksınız:

getValueFromObservable()
   .then((data:any)=>{
   //... continue with anything depending on "data" after the Promise has resolved
})

Daha ince bir çözüm bunun yerine RxJS '.toPromise () kullanmak olacaktır:

function getValueFromObservable() {
    return this.store.pipe(take(1))
       .toPromise()   
}

Alıcı taraf elbette yukarıdakiyle aynı kalır.

Bu tam olarak doğru kullanma fikri değil Observable

Bileşende, bir nesneyi tutacak bir sınıf üyesi bildirmeniz gerekir (bileşeninizde kullanacağınız bir şey)

export class MyComponent {
  name: string = "";
}

O zaman Servicesize bir geri dönecek Observable:

getValueFromObservable():Observable<string> {
    return this.store.map(res => res.json());
}

Component ondan bir değer alabilmek için kendini hazırlamalıdır:

OnInit(){
  this.yourServiceName.getValueFromObservable()
    .subscribe(res => this.name = res.name)
}

ObservableBir değişkene bir değer atamanız gerekir :

Ve şablonunuz değişken tüketecek name:

<div> {{ name }} </div>

Kullanmanın diğer bir yolu Observablearacılığıyla asyncboru http://briantroncone.com/?p=623

Not : Sorduğunuz bu değilse, lütfen sorunuzu daha fazla ayrıntıyla güncelleyin

İade edilecek olan aynı Gözlemlenebilir'e önceden abone olmak istiyorsanız, şunu kullanın:

.yapmak():

function getValueFromObservable() {
    return this.store.do(
        (data:any) => {
            console.log("Line 1: " +data);
        }
    );
}

getValueFromObservable().subscribe(
        (data:any) => {
            console.log("Line 2: " +data)
        }
    );

Sorun şu ki, veriler gözlemlenebilir olanın içinde yakalanır ve ben sadece konsolide edebilirim. İçinde bulunduğu işlevi çağırarak bu değeri ve console.log'u veya farklı bir dosyadan herhangi bir şeyi döndürmek istiyorum.

Görünüşe göre, bir emisyon yayarken ve sonrasında gözlemlenebilir bir cihazın içinde "mevcut değer" alıcıyı arıyorsunuz.

Subjectve Observableböyle bir şeye sahip değil. Bir değer çıktığında abonelerine aktarılır ve onunla Observableyapılır.

En BehaviorSubjectson çıkarılan değeri depolayan ve yeni abonelere hemen gönderenleri kullanabilirsiniz.

Aynı zamanda getValue()mevcut değeri elde etmek için bir yöntemi vardır ;

Daha fazla okuma:

RxJS BehaviorSubject

RxJS Öznesi veya Gözlemlenebilir'in mevcut değeri nasıl elde edilir?

Gözlemlenebilir değerler herhangi bir yerden alınabilir. Kaynak dizisi, birinci bir itilir özel üzerine gözlemci başka yayan edebilmektedir. Bu, Reaktif Uzantılardan (RxJS) Konu sınıfıyla elde edilir .

var subject = new Rx.AsyncSubject();  // store-last-value method

Gözlemciye değer depolayın .

subject.next(value); // store value
subject.complete(); // publish only when sequence is completed

Değeri başka bir yerden almak için, gözlemciye şu şekilde abone olun:

subject.subscribe({
  next: (response) => {
      //do stuff. The property name "response" references the value
  }
});

Konular hem Gözlemlenebilirler hem de Gözlemcilerdir. Diğer kullanım senaryoları için BehaviourSubject ve ReplaySubject gibi başka Konu türleri vardır .

RxJS'yi içe aktarmayı unutmayın.

var Rx = require('rxjs');

Önceki cevaplar bir şekilde işe yarasa da, gözlemlenebilirleri kullanmaya devam etmek istiyorsanız BehaviorSubject kullanmanın doğru yol olduğunu düşünüyorum.

Misal:

    this.store.subscribe(
        (data:any) => {
            myService.myBehaviorSubject.next(data)
        }
    )

Serviste:

let myBehaviorSubject = new BehaviorSubjet(value);

Component.ts içinde:

this.myService.myBehaviorSubject.subscribe(data => this.myData = data)

Umarım bu yardımcı olur!

Örneğin bu benim html şablonum:

<select class="custom-select d-block w-100" id="genre" name="genre"
                  [(ngModel)]="film.genre"
                  #genreInput="ngModel"
                  required>
            <option value="">Choose...</option>
            <option *ngFor="let genre of genres;" [value]="genre.value">{{genre.name}}</option>
          </select>

Bu, Bileşenimdeki şablonla bağlanan alandır:

  // Genres of films like action or drama that will populate dropdown list.
  genres: Genre[];

Sunucudan dinamik olarak film türlerini alıyorum. Oluşturduğum sunucu ile iletişim kurmak içinFilmService

Bu, sunucuyla iletişim kuran yöntemdir:

 fetchGenres(): Observable<Genre[]> {
    return this.client.get(WebUtils.RESOURCE_HOST_API + 'film' + '/genre') as Observable<Genre[]>;
  }

Bu yöntem neden Observable<Genre[]>böyle bir şey döndürmüyor Genre[]?

JavaScript, asyncpahalı bir işlemden sonra bir yöntemin değer döndürmesini beklemez. Pahalıyla, değer döndürmesi zaman alan bir süreci kastediyorum. Sunucudan veri almak gibi. Yani zorunda gözlemlenebilir bir başvuru döndürmek ve onu abone olun.

Örneğin Bileşenimde:

ngOnInit() {
    this.filmService.fetchGenres().subscribe(
      val => this.genres = val
    );
  }

function getValueFromObservable() {
    this.store.subscribe(
        (data:any) => {
            return data
        }
    )
}
console.log(getValueFromObservable())

Yukarıdaki durumda, console.log söz çözülmeden önce çalışır, bu nedenle hiçbir değer görüntülenmez, aşağıdaki gibi değiştirin

function getValueFromObservable() {
    return this.store
}

getValueFromObservable()
 .subscribe((data: any) => {
    // do something here with data
    console.log(data);
});

diğer bir çözüm, operatörün gözlemlenebilir kullanımını döndürmek ve işleve abone olmak için getValueFromObservable içindeki verilere ihtiyaç duyduğunuz zamandır.

 function getValueFromObservable() {
        return this.store.subscribe((data: any) => {
            // do something with data here
            console.log(data);
            //return again observable.
            return of(data);
       })
    }

    getValueFromObservable()
     .subscribe((data: any) => {
        // do something here with data
        console.log(data);
    });

Javascript'in tek iş parçacıklı, eşzamansız, vaat odaklı, reaktif trendli dünyasında async/await, zorunlu stil programcının en iyi arkadaşı:

(async()=>{

    const store = of("someValue");
    function getValueFromObservable () {
        return store.toPromise();
    }
    console.log(await getValueFromObservable())

})();

Ve storebirden çok değer dizisi olması durumunda :

  const aiFrom = require('ix/asynciterable').from;
  (async function() {

     const store = from(["someValue","someOtherValue"]);
     function getValuesFromObservable () {
        return aiFrom(store);
     }
     for await (let num of getValuesFromObservable()) {
       console.log(num);
     }
  })();

İyi bir yol, gözlemlenebilir olanı bir fonksiyondan geri döndürmek ve gerektiğinde ona abone olmaktır, çünkü gözlemlenebilirler tembeldir, sadece abone olduklarında değerleri yaymaya başlarlar.

Burada, başlangıçta üzerinde oynadığım, olay odaklı bir çözüm daha var. Aşağıdaki örnek, nodejs'nin " olaylar " modülünü kullanarak bunu yapar . Bunu benzer modüllerin bulunduğu diğer çerçevelerle kullanabilirsiniz ( Not : Sözdizimi ve stil, kullanılan modüle bağlı olarak değişebilir).

var from =require("rxjs").from;
var map = require("rxjs/operators").map;
var EventEmitter = require("events");

function process(event) {
    from([1,2,3]).pipe(
        map(val => `The number is:: ${val}`)
    ).subscribe((data) => {
       event.emit("Event1", data); //emit value received in subscribe to the "Event1" listener
    });
}

function main() {
   class Emitter extends EventEmitter{};
    var event = new Emitter(); //creating an event
    event.on("Event1", (data)=>{ //listening to the event of name "Event1" and callback to log returned result
        console.log(data); //here log, print, play with the data you receive
    });
    process(event); //pass the event to the function which returns observable.
}

main(); //invoke main function

Verileri yayma ve dinleme yöntemiyle farklı yerlerden aktarabileceğimiz bir fikri sergilemek için sadece bir örnek. Bu aynı zamanda olay odaklı kod olarak da bilinir.