javascript - Cómo usar múltiples solicitudes Http en Angular 4

Estoy haciendo una aplicación simple con Angular 4 y una API que tiene varias páginas para sus solicitudes.

Por ejemplo, obtengo los 10 primeros personajes con esta URL: http://swapi.co/api/people/

Y para obtener las siguientes 10 personas tengo que hacer una solicitud a esta URL: http://swapi.co/api/people/?page=2

¿Cómo puedo obtener a todas las personas en una sola solicitud? ¿O cuál es la solución para hacer todas las solicitudes con buenas prácticas?

Respuesta #1

Tienes que usar el método forkJoin para poder cargar datos de más de una fuente.

Primero que nada, inclúyelos en el archivo typescript.

import {Observable} from 'rxjs/Rx';

ACTUALIZACIÓN

Para nuevas versiones de Angular usa esto:

import { forkJoin } from 'rxjs';

Muchas veces, necesitamos cargar datos de más de una fuente, y necesitamos esperar hasta que todos los datos se hayan cargado.

El método forkJoin envuelve múltiples Observables. En otras palabras, usamos forkJoin para ejecutar solicitudes http concurrentes.

El método subscribe() de forkJoin establece los manejadores en todo el conjunto de Observables.

Puedes leer más sobre forkJoin aquí, incluyendo muchos ejemplos.

Supongamos que tienes que obtener las primeras 10 páginas.

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

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

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