So verwenden Sie mehrere HTTP-Anfragen in Angular 2

Question

Ich mache eine einfache App mit Angular 4 & eine API, die mehrere Seiten für ihre Anforderungen hat.

Zum Beispiel bekomme ich die ersten 10 Zeichen mit dieser URL: http://swapi.co/api/people/

und die nächsten 10 Leute zu bekommen Ich habe Anforderung an diese URL zu machen: http://swapi.co/api/people/?page=2

Wie kann ich alle Leute in eine Bitte ? Oder was ist die Lösung, um alle Anfragen mit guten Praktiken zu machen?

Answer 1

Sie müssen forkJoin Methode verwenden, um Daten aus mehr als einer Quelle zu laden.

Vor allem, fügen Sie sie in die typescript Datei ein.

import {Observable} from 'rxjs/Rx'; 

Viele Male, müssen wir die Daten von mehr als einer Quelle laden, und wir müssen warten, bis alle Daten geladen hat.

forkJoin Methode umschließt mehrere Observables. Mit anderen Worten, wir verwenden forkJoin, um concurrent http Anfragen auszuführen.

subscribe() Methode der forkJoin setzt die Handler auf den gesamten Satz von Observable.

Sie können mehr über forkJoinhere lesen, einschließlich vieler Beispiele.

Angenommen, Sie müssen die ersten 10 Seiten bekommen.

var pages:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

Oder einfach: var pages:number[]=new Array(10).fill().map((v,i)=>i+1);

// map them into a array of observables and forkJoin 
Observable.forkJoin(
    pages.map(
     i => this.http.get('http://swapi.co/api/people/?page=' + i) 
     .map(res => res.json()) 
    ) 
).subscribe(people => this.people = people);