Question

我需要进行一系列的http调用，每个调用都取决于先前的响应（主体或标头）。如何使用Observables实现此目标？

到目前为止，我已经进行了丑陋的嵌套订阅：

this.http.get(url1)
.subscribe(response1 => {
    const params1 = something(response1);
    this.http.post(url2, params1)
    .subscribe(response2 => {
        const params2 = something(response1,response2);
        this.http.post(url3, params2)
       .subscribe(response3 => {
           const params3 = something(response1,response2,response3);
           this.http.post(url4, params3)
           .subscribe(response4 => {
               const params4 = something(response1,response2,response3,response4);
               this.http.post(url5, params4)
               .subscribe(response5 => console.log(response5));
           });
       });
    });
});

Answer 1

您可以尝试使用flatmap rxJS运算符以获得更好的可读性。我认为它将如下所示。 rxJS6，您将需要使用管道运算符才能使其正常工作。

简单示例

这是一个更完整的示例解决方案，用于了解发生了什么情况。

public test(): Observable<any>
{
    return of([1]);
    //when subscribed to returns [1]
}

public testTwo(value): void
{
    console.log(value); // [1] <- comes from the observable
    this.fromEndpoint = value;
}

public testThree(example): Observable<any>
{
    if (example[0] === 1)
    {
        return of([3]);
        // return an array of [3] when subscribed to.
    }
}

public ngOnInit()
{
    this.test().pipe(flatMap(response1 => (this.testTwo(response1), 
    this.testThree(response1)))).subscribe(final => 
    {        
        console.log(final); 
        // this logs ['3'] as the calls are chained with flatMap
    }); 
}

我希望我整理的更简单的示例可以使它更容易理解。这使我认为您可以对提供的代码执行以下操作。

解决方案

this.http.get(url1).pipe(
  flatMap(response1 => (this.exampleFunction(response1), this.http.get(response1))),
  flatMap(response2 => (this.responseValue = response2, this.http.get(response2))),
  flatMap(response3 => (this.exampleFunctionThree(response3), this.http.get(response3)))
).subscribe(final => {
    console.log(final);
    console.log(this.responseValue);
});

请注意，console.log(final);仅记录上次可观察的/ api调用的结果，并且不会一路收集值。如果您需要收集所有值，则可以传入一个单独的函数来发送响应，也可以在更高范围内声明它。我已经在上面的示例中证明了这一点。

文档

flatmap and switchmap

of and subscriptions as they are used in example

flatMap is an alias for mergeMap!

RxJS解决了一系列可观察变量，其中每个依赖于先前的

1 个答案: