typescript - reactiva - ¿Cómo devolver el valor de la función que tiene una suscripción Observable dentro?

subject angular 6

Question

No sé cómo extraer el valor de Observable para que sea devuelto por la función en la que Observable está presente. Solo necesito que me devuelvan un valor, nada más.

Versión actual que funciona

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

Necesito que esto funcione, funcione para devolver el valor y luego:

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

¿Qué estoy haciendo mal aquí?

Answer 1

El problema es que los datos se capturan dentro del observable y solo puedo registrarlos en la consola. Quiero devolver ese valor y console.log o lo que sea de un archivo diferente llamando a la función en la que reside.

Parece que está buscando un captador de "valor actual" dentro de un observable, cuando emite y después de una emisión.

Subject y Observable no tiene tal cosa. Cuando se emite un valor, se pasa a sus suscriptores y el Observable con él.

Puede usar BehaviorSubject que almacena el último valor emitido y lo emite inmediatamente a los nuevos suscriptores.

También tiene un método getValue() para obtener el valor actual;

Otras lecturas:

RxJS BehaviorSubject

¿Cómo obtener el valor actual de RxJS Subject u Observable?

Answer 2

Esta no es exactamente la idea correcta de usar Observable

En el componente, debe declarar el miembro de la clase que contendrá un objeto (algo que va a usar en su componente)

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

Luego, un Service le devolverá un Observable :

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

Component debe prepararse para poder recuperar un valor de él:

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

Debe asignar un valor de un Observable a una variable:

Y su plantilla consumirá el name variable:

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

Otra forma de usar Observable es a través de una tubería async http://briantroncone.com/?p=623

Nota : Si no es lo que está preguntando, actualice su pregunta con más detalles.

Answer 3

Los valores observables se pueden recuperar desde cualquier ubicación. La secuencia fuente se inserta primero en un observador especial que puede emitir en otro lugar. Esto se logra con la clase Asunto de las Extensiones Reactivas (RxJS).

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

Almacenar valor en el observador .

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

Para recuperar el valor de otro lugar, suscríbase al observador así:

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

Los sujetos son observables y observadores. Hay otros tipos de temas, como BehaviourSubject y ReplaySubject para otros escenarios de uso.

No olvides importar RxJS.

var Rx = require(''rxjs'');

Answer 4

Me doy cuenta de que esta pregunta fue hace bastante tiempo y seguramente ya tienes una solución adecuada, pero para cualquiera que esté buscando esto, sugeriría resolverlo con una promesa de mantener el patrón asíncrono. Una versión más detallada sería crear una nueva promesa:

function getValueFromObservable() {
    return new Promise(resolve=>{
        this.store
         .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);
         })
    }
}

En el extremo receptor, tendrá que "esperar" a que la promesa se resuelva con algo como esto:

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

Una solución más delgada sería usar RxJS ''.toPromise () en su lugar:

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

El lado receptor se mantiene igual que el anterior, por supuesto. ¡Espero que ayude!

Answer 5

Por ejemplo, esta es mi plantilla html:

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

Este es el campo que se unió con la plantilla de mi Componente:

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

Busco géneros de películas del servidor dinámicamente. Para comunicarme con el servidor, he creado FilmService

Este es el método que comunica el servidor:

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

¿Por qué este método devuelve Observable<Genre[]> no algo así como Genre[] ?

JavaScript es async y no espera a que un método devuelva valor después de un proceso costoso. Con costoso me refiero a un proceso que lleva un tiempo devolver el valor. Como obtener datos del servidor. Por lo tanto, debe devolver la referencia de Observable y suscribirse.

Por ejemplo en mi Componente:

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

Answer 6

Si desea suscribirse previamente al mismo Observable que se devolverá, simplemente use

.hacer():

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

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