javascript - 在 Angular 4 中从先前的 http 响应成功调用 http 请求(避免回调 hell )

Question

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

我当前的代码是:

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)
    );

}

我的服务是非常标准的 Angular 服务

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 );
}

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

Answer 1

这是 mergeMap 链的一个简单案例。像这样:

this.service.callFunction1(params).pipe(
  mergeMap(res => this.service.callFunction2(res)),
  mergeMap(res => this.service.callFunction3(res)),
)
  .subscribe(
    (result) => console.log('done', result),
    (error) => console.log('error in chain', error),
  );

这是一个有效的 Stackblitz .

编辑:当然，您可以将那些 response.status === 'success' 检查包装在一个函数中，或者就在那里，但如果您只是检查对于 HTTP 错误，它们都会简单地破坏底部错误处理程序中的链。