Angular 6 RxJS 链接多个依赖订阅

Question

我希望有人可以就如何执行以下操作提供一些建议：

我需要链接多个 http 请求，每个请求取决于前一个的结果。

即

第 1 步：登录用户

第 2 步：经过身份验证的 Http 请求

第 3 步：经过身份验证的 Http 请求以及来自第 2 步的响应值

第 4 步：经过身份验证的 Http 请求以及来自第 3 步的响应值

到目前为止，我有以下代码（有效）：

this.authSandbox.login(this.loginForm).subscribe(() => {

    this.customerEnquirySandbox.createCustomer(newCustomer)
    .filter(response => !!response) // continue when response not null
    .subscribe((response) => {

        let response1Details = {
            "id": response.data.id,
        };

        this.customerEnquirySandbox.createMeasure(response1Details )
        .filter(response => !!response)
        .subscribe((response) => {

            let response2Details =  {
                "id": response.data.id,
            };

            this.customerEnquirySandbox.saveAnswers(response2Details )
            .filter(response => !!response)
            .subscribe((response) => {

                if (response.data.success) { 
                    alert('Form completed and answers saved successfully');
                } else {
                    alert('Error submitting answers');
                }

                this.authSandbox.customerEnquirylogout();
            });

        });

    });

});

上述方法可行，但似乎不是最合适的方法。我似乎建议使用 switchMap，但不确定这是否是正确的方法。如果有人可以就如何更正确地执行上述操作提供任何指导，我们将不胜感激。

提前致谢

Answer 1

就像 JB 建议的那样，如果每个后续调用都依赖于前面的调用，那么 switchMap 是一种可行的方法，而如果它们可以并行完成，那么 zip 是一个不错的选择。这是您的代码重构为使用 switchMap

this.authSandbox.login()
    .pipe(
        filter(response => !!response),
        switchMap(response => {
            return this.customerEnquirySandbox.createCustomer(newCustomer);
        }),
        filter(response => !!response),
        switchMap(response => {
            return this.customerEnquirySandbox.createMeasure(response.data);
        }),
        filter(response => !!response),
        switchMap(response => {
            return this.customerEnquirySandbox.saveAnswers(response.data);
        }),
        filter(response => !!response),
        switchMap((response): Observable<never> => {
            if (response.data.success) {
                alert('Form completed and answers saved successfully');
            } else {
                alert('Error submitting answers');
            }
            this.authSandbox.customerEnquirylogout();
            return EMPTY; /* EMPTY is a Observable which immediately completes */
        }),
    );

Learn about switchMap here

使用这种方法的另一个好处是您可以将订阅下移到需要诸如组件之类的值的级别。对于服务，通常您只需将 Observable 的输出视为流并对其应用操作即可。