Frage typescript - warte auf ein beobachtbares / Versprechen zu beenden und wieder beobachtbar


Ich bin still zu Typescript & RxJS, und ich versuche, eine Observable zurückzugeben, nachdem eine andere Observable beendet ist:

public myObservable = () : Observable<boolean> =>{
    console.log('retrieving the token in DB');
    return Observable.create(observer => {
        setTimeout(() => {
            observer.next(true);
            observer.complete();
        }, 5000);
    });
}

public makeRequest = (): Observable<any> => {
    return this.myObservable().subscribe(
        function (x) {
            console.log('I have the token, now I can make the HTTP call');

            return this.http.get('http://jsonplaceholder.typicode.com/posts/1')
                .map( (responseData) => {
                    return responseData.json();
                })
                .map((item:any) => {
                    return {
                        id: item.id,
                        userId: item.userId,
                        title: item.title,
                        body: item.body
                    };
                });

        },
        function (err) {
            console.error('Error: ' + err);
        },
        function () {
            console.log('Completed');
        });

}

Ich habe den Fehler: "Die zurückgegebene Ausdruckstyp-Subskription ist nicht dem Typ zuweisbar Observable<any>".

Ich verstehe den Fehler hier völlig (Ein Observable ist wie ein Stream, und ein Abonnement ist die Tatsache, diesen Stream "zu beobachten"), aber ich sehe nicht, wie ich auf ein Observables "warten" kann (oder ein Versprechen) zu beenden, um eine beobachtbare zurückzugeben ...


17
2018-05-18 15:34


Ursprung


Antworten:


Das Problem ist, dass wir Observable in einen anderen Typ konvertieren ... mit .subscribe - während wir nicht sollten (es ist nicht beobachtbar)

public makeRequest = (): Observable<any> => {
    return this.myObservable().subscribe(
      ... // this is wrong, we cannot return .subscribe
          // because it consumes observable and returns ISusbcriber
    );
}

Wenn wir ein Observable haben ... sollten wir einfach sein Ergebnis nehmen und .map verwenden, um es in etwas anderes umzuwandeln

FlatMap Operator

transformiere dann die Objekte, die von einem Observable in Observables ausgegeben werden   reduzieren Sie die Emissionen von diesen in ein einzelnes Observable

public makeRequest = (): Observable<any> => {
    return this.myObservable()
       .flatmap((x) => return this.http
              .get('http://jsonplaceholder.typicode.com/posts/1')
              .map( (responseData) => {
                    return responseData.json();
              })
              ...

Überprüfen Sie alle Details hier

VORTEILE VON BEOBACHTUNGEN IN ANGULAR 2 NUTZEN


11
2018-05-18 15:54



Während flatMap () funktionieren könnte, da Sie einen Parameter nicht übergeben, der verwendet wird [siehe param (x)], ist der beste Operator, den Sie in diesem Szenario verwenden können, forkJoin ().

Bitte beachten Sie dieses Beispiel: https://stackoverflow.com/a/38049268/1742393

   Observable.forkJoin(
    this.http.get('/app/books.json').map((res:Response) => res.json()),
    this.http.get('/app/movies.json').map((res:Response) => res.json())
).subscribe(
  data => {
    this.books = data[0]
    this.movies = data[1]
  },
  err => console.error(err)
);

10
2018-05-23 22:41