如何在 Angular 4 中使用多个 Http 请求

Question

我正在使用 Angular 4 和一个 API 制作一个简单的应用程序，该应用程序有几个页面来满足他们的请求。

例如，我使用此 url 获得前 10 个字符： http://swapi.co/api/people/

为了得到接下来的 10 个人，我必须向这个 url 提出请求：http://swapi.co/api/people/?page=2

如何在一个请求中获得所有人？或者通过良好实践提出所有请求的解决方案是什么？

Answer 1

您必须使用forkJoin 方法才能从多个来源加载数据。

首先，将它们包含在typescript 文件中。

import {Observable} from 'rxjs/Rx';

更新

对于新版本的 Angular，请使用：

import { forkJoin } from 'rxjs';

很多时候，我们需要从多个来源加载数据，我们需要等到所有数据都加载完毕。

forkJoin 方法包装了多个Observables。换句话说，我们使用forkJoin 来运行concurrent http requests。

forkJoin 的subscribe() 方法在整个 Observables 集合上设置处理程序。

您可以阅读有关 forkJoin here 的更多信息，包括很多示例。

假设您必须获得前 10 页。

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

或者简单地说：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);