Warum müssen wir flatMap verwenden?

Ich fange an, RxJS zu verwenden, und ich verstehe nicht, warum wir in diesem Beispiel eine Funktion wie flatMapoder verwenden müssen concatAll. Wo ist das Array von Arrays hier?

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseMetastream = requestStream
  .flatMap(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

responseMetastream.subscribe(url => {console.log(url)})

Wenn jemand visuell erklären kann, was passiert, ist dies sehr hilfreich.

Als ich anfing, einen Blick darauf zu werfen, Rxjsstolperte ich auch über diesen Stein. Was mir geholfen hat, ist Folgendes:

• Dokumentation von reactivex.io. Zum Beispiel für flatMap: http://reactivex.io/documentation/operators/flatmap.html
• Dokumentation von rxmarbles: http://rxmarbles.com/ . Sie werden dort nicht finden flatMap, Sie müssen mergeMapstattdessen schauen (ein anderer Name).
• die Einführung zu Rx, die Sie vermisst haben: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 . Es wird ein sehr ähnliches Beispiel angesprochen. Insbesondere wird die Tatsache angesprochen, dass ein Versprechen einem beobachtbaren Wert ähnelt, der nur einen Wert ausstrahlt.

• Schauen Sie sich endlich die Typinformationen von RxJava an. Nicht getipptes Javascript hilft hier nicht. Grundsätzlich Observable<T>bezeichnet if ein beobachtbares Objekt, das Werte vom Typ T flatMapüberträgt, eine Funktion vom Typ T' -> Observable<T>als Argument und gibt sie zurück Observable<T>.mapübernimmt eine Funktion vom Typ T' -> Tund gibt zurück Observable<T>.

  Zurück zu Ihrem Beispiel: Sie haben eine Funktion, die Versprechen aus einer URL-Zeichenfolge erzeugt. Also T' : stringund T : promise. Und von dem, was wir vorher gesagt haben promise : Observable<T''>, also T : Observable<T''>mit T'' : html. Wenn Sie diese vielversprechende Funktion einsetzen map, erhalten Sie, Observable<Observable<T''>>wann Sie wollen Observable<T''>: Sie möchten, dass das Observable die htmlWerte ausgibt. flatMapwird so genannt, weil es das Ergebnis von abflacht (eine beobachtbare Schicht entfernt) map. Abhängig von Ihrem Hintergrund mag dies für Sie chinesisch sein, aber mit den Tippinformationen und der Zeichnung von hier wurde mir alles klar: http://reactivex.io/documentation/operators/flatmap.html .

['a','b','c'].flatMap(function(e) {
    return [e, e+ 'x', e+ 'y',  e+ 'z'  ];
});
//['a', 'ax', 'ay', 'az', 'b', 'bx', 'by', 'bz', 'c', 'cx', 'cy', 'cz']


['a','b','c'].map(function(e) {
    return [e, e+ 'x', e+ 'y',  e+ 'z'  ];
});
//[Array[4], Array[4], Array[4]]

Sie verwenden flatMap, wenn Sie ein Observable haben, dessen Ergebnisse mehr Observables sind.

Wenn Sie ein Observable haben, das von einem anderen Observable erzeugt wird, können Sie es nicht direkt filtern, reduzieren oder abbilden, da Sie ein Observable haben, das nicht die Daten enthält. Wenn Sie eine beobachtbare Datei erstellen, wählen Sie flatMap anstelle der Karte. dann bist du okay

Wie im zweiten Snippet müssen Sie flatMap verwenden, wenn Sie einen asynchronen Vorgang ausführen.

var source = Rx.Observable.interval(100).take(10).map(function(num){
    return num+1
});
source.subscribe(function(e){
    console.log(e)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>

var source = Rx.Observable.interval(100).take(10).flatMap(function(num){
    return Rx.Observable.timer(100).map(() => num)
});
source.subscribe(function(e){
    console.log(e)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>

flatMap Verwandeln Sie die von einem Observable emittierten Elemente in neue Observables und glätten Sie dann die Emissionen aus diesen in ein einzelnes Observable.

Schauen Sie sich das folgende Szenario an, get("posts")in dem ein Observable zurückgegeben wird, das von "abgeflacht" wird flatMap.

myObservable.map(e => get("posts")).subscribe(o => console.log(o));
// this would log Observable objects to console.  

myObservable.flatMap(e => get("posts")).subscribe(o => console.log(o));
// this would log posts to console.

Menschen neigen dazu, Dinge zu komplizieren, indem sie die Definition geben, die besagt:

flatMap wandelt die von einem Observable emittierten Elemente in Observables um und reduziert dann die Emissionen von diesen in ein einzelnes Observable

Ich schwöre, diese Definition verwirrt mich immer noch, aber ich werde sie auf einfachste Weise anhand eines Beispiels erklären

Unsere Situation : Wir haben ein Observable, das Daten zurückgibt (einfache URL), die wir verwenden werden, um einen HTTP-Aufruf durchzuführen, der ein Observable zurückgibt, das die benötigten Daten enthält, damit Sie die Situation wie folgt visualisieren können:

Observable 1
    |_
       Make Http Call Using Observable 1 Data (returns Observable_2)
            |_
               The Data We Need

Wie Sie sehen, können wir die benötigten Daten nicht direkt erreichen. Als erste Möglichkeit, die Daten abzurufen, können wir nur normale Abonnements wie diese verwenden:

Observable_1.subscribe((URL) => {
         Http.get(URL).subscribe((Data_We_Need) => {
                  console.log(Data_We_Need);
          });
});

Dies funktioniert, aber wie Sie sehen, müssen wir Abonnements verschachteln, um unsere Daten zu erhalten. Dies sieht derzeit nicht schlecht aus. Stellen Sie sich jedoch vor, wir haben 10 verschachtelte Abonnements, die nicht mehr gewartet werden können.

Ein besserer Weg, dies zu handhaben, besteht darin, nur den Operator zu verwenden, der flatMapdas Gleiche tut, aber dieses verschachtelte Abonnement vermeidet:

Observable_1
    .flatMap(URL => Http.get(URL))
    .subscribe(Data_We_Need => console.log(Data_We_Need));

Einfach:

[1,2,3].map(x => [x, x * 10])
// [[1, 10], [2, 20], [3, 30]]

[1,2,3].flatMap(x => [x, x * 10])
// [1, 10, 2, 20, 3, 30]]

Es ist kein Array von Arrays. Es ist ein Observable von Observable (s).

Im Folgenden wird ein beobachtbarer Zeichenfolgenstrom zurückgegeben.

requestStream
  .map(function(requestUrl) {
    return requestUrl;
  });

Während dies einen beobachtbaren Strom von beobachtbarem Strom von json zurückgibt

requestStream
  .map(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

flatMap glättet das Observable automatisch für uns, damit wir den JSON-Stream direkt beobachten können

Ein Observable ist ein Objekt, das einen Strom von Ereignissen ausgibt: Next, Error und Completed.

Wenn Ihre Funktion eine Observable zurückgibt, gibt sie keinen Stream zurück, sondern eine Instanz von Observable. Der flatMapBediener ordnet diese Instanz einfach einem Stream zu.

Dies ist das Verhalten im flatMapVergleich zu map: Führen Sie die angegebene Funktion aus und reduzieren Sie das resultierende Objekt zu einem Stream.

Hier wird die äquivalente Implementierung einer flatMap mithilfe von Abonnements gezeigt.

Ohne flatMap:

this.searchField.valueChanges.debounceTime(400)
.subscribe(
  term => this.searchService.search(term)
  .subscribe( results => {
      console.log(results);  
      this.result = results;
    }
  );
);

Mit flatMap:

this.searchField.valueChanges.debounceTime(400)
    .flatMap(term => this.searchService.search(term))
    .subscribe(results => {
      console.log(results);
      this.result = results;
    });

http://plnkr.co/edit/BHGmEcdS5eQGX703eRRE?p=preview

Hoffe es könnte helfen.

Olivier.

Mit flatMap

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseMetastream = requestStream
  .flatMap(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

responseMetastream.subscribe(json => {console.log(json)})

Ohne flatMap

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseMetastream = requestStream
  .map(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

responseMetastream.subscribe(jsonStream => {
  jsonStream.subscribe(json => {console.log(json)})
})