angular - 尝试在我当前的 Angular 应用程序中使用异步管道而不是订阅

Question

我正在开发 Angular(v4) 应用程序。与任何其他网络应用程序一样，此应用程序也有 HTTP请求，对于这些请求中的每一个，我都有一个订阅来获取数据并将它们显示在 UI 上。我一直在阅读关于 async 的使用管道以及为什么它比 subscribe 更好.据我所读，它肯定比普通的有好处 subscribe方法，我确信我应该在我的应用程序中使用它，但我不确定如何使用这个 aync 构建我的应用程序管道而不是 subscribe .让我发布我的应用程序的结构:

我有一个服务层发出 Http向后端请求，例如:

some-service.component.ts

@Injectable()
export class SomeService {
 constructor(private http: HttpClient) {
}
 getSomething() {
    return this.http.get(`${this.baseUrl}/${'test'}`);
}
}

上述服务为我的组件提供了一个 Observable，我通常在其中订阅它，如下所示:

some-component.ts

    @Component({
    selector: 'some-app',
    templateUrl: './some.component.html',
    styleUrls: []
})
export class SomeComponent {
 constructor(private someService: SomeService) {
    }
  getSomething() {
        this.someService
            .getSomething()
            .subscribe(
                // the first argument is a function which runs on success
                (data) => {
                  // DO SOME DATA TRANSFORMATION HERE
                                    },
                // the second argument is a function which runs on error
                (err: HttpErrorResponse) => {
                    this.exceptionService.errorResponse(err);
                },
                // the third argument is a function which runs on completion
                () => {
                      // MAKE SOME FUNCTION CALL
                                }
            );
    }
}

以上是我如何订阅一般 HTTP 的一般结构回复。我想摆脱这个subscribe并使用 async反而。但是，我的问题是，我做了一些 data transformation收到数据后(如上所示)或某个时间 I make some function call from the完成observer (如上所示)和这样的操作，我不确定一旦切换到 async 我将如何进行这些操作.

对于数据转换，我想，我可以在我的服务中完成(虽然不确定)但是我如何像现在这样进行函数调用。

任何输入将不胜感激。如果我的问题需要更多说明，也请告诉我。谢谢!

Answer 1

我会根据你的代码以更通用的方式回答

foo.service.ts

@Injectable()

export class FooService {

    constructor(private _http:HttpClient){ }

    public getFoo():Observable<any> {
        return this._http.get(`${API_URL}`).map(r => r.json());
    }
}

在 map 运算符中，您可以进行操作并返回新状态

foo.component.ts

导入 rxjs finally最终调用方法的运算符

import 'rxjs/add/operators/finally';


export class FooComponent {

    public bar$:Obervable<any>;

    constructor(private _foo:FooService){}

    getBar(): void {

        this.bar$ = this._foo.getFoo()
                             .finally(() => {

                               // INVOKE DESIRED METHOD

                             });

    }
}

foo.html

<div *ngIf="bar$ | async; let bar"> <h3> {{bar}} </h3> </div>

这将创建 div 包装器元素并为其提供可见性隐藏选项，因此不需要 ?。 '猫王'运算符

你也可以根据自己的需要修改ngIf表达式