Angular2.如何检查观察是否完成？

Question

在我的页面中有一个生成报告的按钮.该报告需要在加载页面时使用http调用加载到休息端点的数据,但我无法保证在用户按下报告按钮时加载它们.

如何观察观察结果是否完整,如果不完整,等待动作直到http呼叫完成？以下是一些代码:

loadCompanies(): void {
    this._companyService.getCompanies().subscribe(
        response => {
            this.companiesModel = response;
        },
        err => console.log(err)
    );
}

generateReport() {
   // check if observable that loads companies is completed and do the 
   // action using companiesModel.
} 

一个选项是在加载公司中设置标志,其值为"loading"和"completed",并等待generateReport()标志完成,但我希望Observable尽可能使用API 的解决方案.

Answer 1

您可以通过使用onCompleted回调来完成此操作subscription.例如,假设您在用户按下报告按钮时显示加载栏;

loadCompanies(): void {
     this._companyService.getCompanies().subscribe(
          response => {
               this.companiesModel = response;
          },
          err => {
               console.log(err);
               //closeLoadingBar();
          },
          () => {
               //do whatever you want
               //closeLoadingBar()
          }
     )
}

generateReport() {
    //showLoadingBar()
    this.loadCompanies();
}

如果从http调用中收到错误,onCompleted则不会调用方法,只会onError调用该方法.如果成功,onCompleted将在您的onNext方法之后调用方法.

这是订阅的文档.我希望它有所帮助!

Answer 2

另一种解决方案：

实际上 subscribe 函数需要三个参数：

onNext onError onCompleted

this._companyService.getCompanies().subscribe(
    (response) => { this.companiesModel = response; },
    (err) => { console.log(err) },
    (finally) => { console.log('finally') }
);

Answer 3

方法

finally()

在源可观察序列正常或异常终止后调用指定的操作。

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/finally.md