Angular2链http请求答案

【问题标题】：Angular2 chain http requestAngular2链http请求
【发布时间】：2018-03-26 23:18:36
【问题描述】：

我必须发出 2 个 http 请求。第一个 http 请求返回一个 url 列表和一些字符串。然后我需要在这个 url 上发出另一个 http 请求来获取花药数据，并将这个数据附加到我从第一个 http 请求中获得的字符串。

我应该如何在 angularJs2 中做到这一点

现在我可以使用 observable 发出第一个 http 请求，但我无法获得第二个 http 请求。

我一直在研究 observables、flatmap 和 mergemap，但我对 angular2 和 observables 都是新手，这有点令人困惑。

所以我的问题是链接这两个请求的最佳方式是什么？

【问题讨论】：

标签： angular http observable

【解决方案1】：

此答案并非特定于 Angular，而是主要展示了如何将 Reactive 运算符链接在一起以获得您需要的内容。您可以执行以下操作（警告：未经测试的代码）：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switch';

export class Foo {
    bar() {
        const httpClient: HttpClient = /* Your HTTP client here */;
        httpClient
            .get<UrlAndString[]>('first url')
            .map(urlsAndStrings => {
                const parameter = doSomethingWithUrlsAndStrings(urlsAndStrings);
                return httpClient
                    .get<SecondResult>(`second url?param=${parameter}`)
                    .map(secondResult => { return [urlsAndStrings, secondResult]; });
            })
            .switch()
            .subscribe(tuple => {
                console.log(tuple[0]); // The urls and strings, of type UrlAndString[].
                console.log(tuple[1]); // The second result, of type SecondResult.
            });
    }
}

import 语句引入了map 和switch 运算符，以便您可以链接它们。

map 在事件通过时对其进行转换，因此您可以看到，当第一个 .get() 返回某些内容时，它将映射到另一个 Observable<T>。所以第一个map 函数的类型签名将是map<UrlAndString[], Observable<[UrlAndString[], SecondResult]>>。这意味着它将返回一个Observable<Observable<[UrlAndString[], SecondResult]>>，或一个发布Observables 的Observable，后者发布UrlAndString[] 和SecondResult 类型的元组。

switch 接受 Observable<Observable<T>> 并将其转换为 Observable<T>。我上面链接的文档比我能解释得更好。但是你可以看到.switch() 的返回类型将是Observable<[UrlAndString[], SecondResult]>。

.subscribe() 你可能已经很熟悉了。

【讨论】：