Question

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

我有一个要求将多个http请求链接在一起，具体取决于前一个的结果。

即

第1步：登录用户

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

第3步：使用第2步的响应值对Http请求进行身份验证

第4步：使用第3步中的响应值对Http请求进行身份验证

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

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的输出视为流，然后对其进行操作即可。

Angular 6 RxJS链多个从属订阅

1 个答案: