angular2 - 在observable完成后導航

Question

我的UserService有一個像這樣的http observable：

logout() {
    return this.http.delete(this.baseUrl + url, {
          headers: this.headers()
        }).map((res: IResponse) => {
          var json = res.json();
          json.headers = res.headers;
          return json;
        }).subscribe((response) => {
          //DO SOMETHING, THEN ----
          return res;
        });
}

我創建了一個observable，並創建了一個訂閱（ response ），它是返回的成功值。

現在，在我的組件中，我想調用UserService.logout() ，然后導航到新路由：

logout() {
    this.userService.logout();
    this.router.navigate(['LandingPage']);
  }

顯然，這可能是異步發生的，我可能會在我退出之前導航。

使用promises，我可以做這樣的事情：

this.userService.logout().then(() => { this.router.navigate(['LandingPage']); });

我怎么能用observable做同樣的事情？ 在我的UserService類中，我想創建一個observable，訂閱它，在成功或出錯時做一些事情，然后從我的視圖組件導航。

Answer 1

您實際上可以使logout方法返回一個promise並正常使用它。 它不一定是可觀察的：

logout() {
    return new Promise((resolve, reject) => {
        this.http.delete(this.baseUrl + url, { headers: this.headers() })
            .map((res: IResponse) => {
              var json = res.json();
              json.headers = res.headers;
              return json;
            })
            .subscribe(data => {
              //DO SOMETHING, THEN ----
              resolve(data);
            }, error => reject(error));
    });
}

logout() {
  this.userService.logout().then(response => this.router.navigate(['LandingPage']))
}

Answer 2

Observable對象最后有方法，試試吧。 不要忘記先導入：

import 'rxjs/operators/finally';

你的logout（）將是：

 logout() {
  return this.http.delete(this.baseUrl + url, { headers: this.headers() })
    .map(res => res.json())
    .finally(() => this.router.navigate(['LandingPage']))
    .subscribe((response) => {
      //DO SOMETHING, THEN ----

    });
  }

如果你真的想要使用諾言：

import 'rxjs/add/operator/toPromise';

logout() {
  return this.http.delete(this.baseUrl + url, { headers: this.headers() })
    .map(res => res.json());

在component.ts中

var aPromise = this.userService.logout().toPromise();
aPromise.then(() => {
    this.router.navigate(['LandingPage']);
});

Answer 3

您不能等待Observable完成，因為它的流可能會無限期地繼續。 但是你可以在subscribe方法中調用router.navigate ：

logout() {
  return this.http.delete(this.baseUrl + url, { headers: this.headers() })
    .map((res: IResponse) => res.json())
    .subscribe((response) => {
      //DO SOMETHING, THEN ----
      this.router.navigate(['LandingPage']);
    });
  }

如果這還不夠，則subscribe返回一個Subscription其unsubscribe方法停止等待Observable的數據。 因此，如果必須，您可以等待超時期限並打電話unsubscribe 。

Answer 4

注銷需要返回Observable而不是訂閱。 例如：

  logout(): Observable<T> { return this.http.delete(this.baseUrl + url, { headers: this.headers() }).map((res: IResponse) => { var json = res.json(); json.headers = res.headers; return json; }) .catch((err)=>Observable.empty()) // return empty if error .share(); // to ensure that no duplicate http calls can occur } //in component: this.service.logout() .do(()=>this.router.navigate(['LandingPage']);)//do stuff .subscribe((res:any)=>{}); //or with template async pipe: public result$ = Observable<T>; result$ = this.service.logout() .do(()=>//do stuff); //in template: {{(result$ | async)?.id}} or simply {{result$ | async}} // Ps do not forget about unsubscribe(), thats why I prefer to use async (since that's the Async pipe's job.) 

有關運算符/方法的更多信息： https ： //github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md