时间戳

首页 > 解决方案 > 在Angular 4中从先前http响应的成功调用http请求（避免回调地狱）

javascript - 在Angular 4中从先前http响应的成功调用http请求（避免回调地狱）

问题描述

我正在使用一个应用程序，在该应用程序中，我需要调用 HTTP 响应以使 HTTP 调用成功。我应该如何重构我的代码以避免回调地狱

我目前的代码是：

Component.ts
SomeFunction() {
    const param2 = {ind_1: value_1, ind_2: value_2};
    this.service.callFunction1(param)
        .subscribe(
        f1_res => {
           if (f1_res.status === 'success' ) {
               this.service.callFunction2(f1_res)
                    .subscribe(
                        f2_res => {
                            this.service.callFunction3(f2_res)
                                .subscribe(
                                     f3_res => console.log('done', f3_res),
                                     f3_err => console.log(err)
                                 );
                        },
                        f2_err => console.log(f2_err)
                    )
           }
        },
        f1_err => console.log(err)
    );

}

我的服务是非常标准的角度服务

Service.ts
callFunction1(param) {
     return this.http.post<any>( 'someurl.com', param );
}

callFunction2(param) {
     return this.http.post<any>( 'someurl.com', param );
}

callFunction3(param) {
     return this.http.post<any>( 'someurl.com', param );
}

我知道这很糟糕，但是我该如何重构呢？

标签： javascriptangularcallback

解决方案

function doStuff(param) {
    this.service.callFunction1(param)
        .subscribe().then(step1(param)
            .flatMap((step1Result) => step2(step1Result)
                .flatMap((step2Result) => step3(step2Result))
                .map((step3Result) => {
                    let doStuffResult = step3Result;
                    if (doStuffResult !== null) {
                        return doStuffResult;
                    }
                })));
}

function step1(f1_res) {
    let result: any = null;
    this.service.callFunction1(f1_res)
        .subscribe(res => {
            if (res.status === 'success') {
                // ...
                this.result = res;
            }
        }, error => {
            console.log(error);
        });

    return Rx.Observable.of(result);
}

function step2(f2_res) {
    let result = null;
    this.service.callFunction2(f2_res)
        .subscribe(
            f2_res => {
                if (f2_res.status === 'success') {
                    this.result = f2_res;
                }
            }, error => { console.log(error) });
    // ...
    return Rx.Observable.of(result);
}

function step3(f3_res) {
    let result = null;
    this.service.callFunction2(f3_res)
        .subscribe(
            f3_res => {
                this.result = f3_res;
            }, error => { console.log(error) });
    // ...
    return Rx.Observable.of(result);
}

这样做的一种非常优雅的方法是将每个订阅的调用作为其自己的单一责任单元并创建一个新单元，Observable因此每个单元仍然表现得独立，但它们是在链中触发的。

推荐阅读