Eckige 2 - Mehrere HTTP-Anfrage in der gleichen Zeit

Bin ich tatsächlich arbeiten auf eine Eckige 2-Anwendung, aber ich habe ein paar Probleme. In der Tat, ich habe eine Methode, die Daten aus einer Datenbank. Aber ich versuche, kopieren Sie diese Daten auf einen anderen ein, zu tun, die ich tun müssen, um mehrere HTTP-Requests ( Anfragen Anzahl sind nie die gleichen ).

Hier ist mein migrieren Methode. Zuerst bekomme ich die Daten aus der DB und dann versuche ich Sie zu posten, in der anderen eine

service.getDatas().subscribe( data => {
  let datas = data.json().data; 
  if (datas) {
    let requests = [];
    for (let data of datas) {
      let req = service.addData(data); //addData() return an Observable
      requests.push(req);
    }
    let c: Observable<any> = Observable.forkJoin(requests);
    return c;
  }
});

Oder Wenn ich subribing zu der Methode habe ich keine Antwort von ihm.

Hier ist meine Abonnenten

service.migrateData(targetDB).subscribe(res => {
      console.log(res);
    });

Möchte ich meine Methode für die Rückgabe einer Antwort, wenn alle Daten posten !
Eigentlich, wenn ich den Aufruf der addData () - Methode ist es nicht sogar auslösen der http-Anfrage, nichts passiert. Ich tryed, um einige RxJs Methode wie concat und forkJoin aber nichts. Oder nur ich nicht mit Ihnen.

Hier ist mein addData () - Methode

addData(data) {
    let headers = new Headers({
      'Content-Type': 'application/json'
    });
    headers.append('Authorization', 'Basic ' + btoa('username + ':' + 'password));
    let _data = JSON.stringify({data: data});
    return this.http.post('https://something.com', _data, {headers: headers});
  }

Diese Methode funktioniert sehr gut für andere nutzen Fall.

Vielen Dank für Ihre Hilfe !

Ich denke, Sie müssen zu abonnieren, um eine beobachtbare, bevor es ausgeführt wird. service.addData(data).subscribe()
Wenn ich das mache, forkjoin wird eine Abonnenten-array und nicht einen beobachtbaren array :/ !
Wie über c.subscribe()? github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/...

InformationsquelleAutor A.Roussange | 2016-11-25

1

Basierend auf Ihrem code das ist, was ich verstanden:
1. Bekommen einige array-von-a-service (von einem rest-Aufruf)
2. Eine rest-Aufruf für jedes element im array
3. Erhalten Sie ein Ergebnis am Ende wenn alles fertig ist
```
const migrationStream$ = service.getDatas()
  .map(data => data.json().data || [])        //and alternative to the "|| []" could be a subsequent ".filter(data => data && data.length)"
  .switchMap(datas => Observable.from(datas)) //split up the js-array into a stream
  .concatMap(data => service.addData(data))
  //.map(singleMigrateResponse => doSomethingWith(singleMigrateResponse))  //optional, is called for every data that is migrated
  .toArray() //optional: this will wait for the previous part of the stream to complete and return an array of all results, remove this if you want to receive every result as a single "next"

//run it by using:
migrationStream$.subsribe(next..., error..., complete...);
```
Diese Methode funktioniert sehr gut für andere nutzen Fall.

Als general Hinweis: die hier: rxjs kann sehr mächtig, wenn richtig eingesetzt, fast alles kann geschrieben werden als stream - als Faustregel können Sie sich merken:
- nur ein abonnieren pro Aktion (in deinem Fall die Aktion Schritte 1-3), wenn Sie mehr als eine abonnieren, Sie denken nicht in strömen
- versuchen Sie zu vermeiden, Daten-Logik innerhalb des Abonnements das Abonnement wird am besten verwendet werden, zur Behandlung von Ereignissen/strahlt/Ergebnisse, z.B. migrationStream$.subscribe(..., ..., () => alert("Migration is complete!"));
InformationsquelleAutor olsn

Hier ist meine Lösung für mehrere Anforderungen stream mit 3 parallelen Anfragen

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
    selector: 'app-multi-http',
    template: `<ul>
    <li *ngFor="let giphy of giphys"> <img src="{{giphy}}"  width="200px"/> </li>
    </ul>`,
})
export class MultiHttpComponent implements OnInit {
    //Requests stream vars
    maxRequests = 3;
    currentRequestsNbr = 0;
    requestsStream = ['run', 'jump', 'hide', 'fight', 'surprise', 'sleep'];

    giphys = [];

    constructor(public http: HttpClient) {
    }

    ngOnInit() {
        this.handleRequestsStream();
    }


    handleRequestsStream() {
        if (this.requestsStream.length > 0) {
            if (this.currentRequestsNbr < this.maxRequests) {
                ++this.currentRequestsNbr;
                const searchTerm = this.requestsStream.shift();
                this.getGiphy(searchTerm).subscribe(
                    url => {
                        this.giphys.push(url);
                    },
                    error => {
                        console.log(error);
                    },
                    () => {
                        --this.currentRequestsNbr;
                        //Try next request on complete
                        this.handleRequestsStream();
                    }
                );
                //Try next request
                this.handleRequestsStream();
            }
        }
    }

    getGiphy(searchTerm) {
        const apiLink = '//api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + searchTerm;
        return this.http.get(apiLink).map((response: any) => {
            if (response.data.length > 0) {
                return response.data[0].images.original.url;
            } else {
                return 'https://media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif'; //dancing cat for 404
            }
        });
    }
}

InformationsquelleAutor abahet

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.