從角色中通過服務調用填充服務獲取數據2

Question

我有一個服務作爲UserService，它獲取其構造函數的數據，然後通過承諾填充_userData的屬性，這裏是服務：

@Injectable() 
    export class UserService { 
     private _userData: GrcUser = null; 


     constructor(private logger: LogService, private http: Http, private noteService: NotificationsService) { 
     logger.trace('UserService Created'); 
     this.getUserInfo() ; 
    } 
     public getUserInfo() { 
     let userID: string = this.getCookieValue('grcUserId'); 
     let headers = new Headers({ 'X-West-session-token': this.getCookieValue("grcSessionToken") }); 
     if (userID) { 
      this.http.get(AppConstants.USER_URL + "userInfo/" + userID, { headers: headers }) 
      .map((res: Response) => res.json()) 
      .toPromise() 
      .then((data: GrcUser) => { 
      this._userData = data; 
      if (!data) { 
      this.noteService.add(new Note('danger', 'Failed to load user 
      details')); 
       } 
      }) 
      .catch((err: any) => { 
       this.logger.error(err); 
       this.noteService.add(new Note('danger', 'Error while getting user details')); 
       Promise.resolve(); 
      }); 
     } else { 
      this.noteService.add(new Note('danger', 'You are not logged in. Please log in and try again')); 
    } 
    } 

現在，我想在另一個組件來獲得用戶數據，這是我的嘗試：

export class WorkflowDisplayComponent implements OnInit { 
    userData: GrcUser; 

    constructor(private _userService: UserService,) { 


    } 
    ngOnInit(): void { 
    this.userData = this._userService.userData; 
    } 
} 

現在我明白爲什麼這是行不通的，我不是瓦亭，直到承諾返回_userData在用戶服務中。我閱讀了一些關於Observable的內容，但我不確定是否要使用它們，以及在這種情況下我可以如何使用它們。

好像我不得不改變我的getUserInfo功能在我userService如果我想使用觀測量

有沒有更好的辦法，我可以做到這一點，而無需重構我的代碼太多

Answer 1

你不應該」 t將http observable轉換爲toPromise（）。在這種情況下，您必須多播您的http observable並將其緩存到您的服務中。

@Injectable() 
    export class UserService { 
     private _userData: GrcUser = null; 
     private httpObservable: Observable; 

     constructor(private logger: LogService, private http: Http, private noteService: NotificationsService) { 
     logger.trace('UserService Created'); 
     this.getUserInfo() ; 
    } 
     public getUserInfo() { 
     let userID: string = this.getCookieValue('grcUserId'); 
     let headers = new Headers({ 'X-West-session-token': this.getCookieValue("grcSessionToken") }); 
     if (userID) { 
     if(this.httpObservable){ 
      return this.httpObservable; 
     } else if(this._userData){ 
      return Observable.of(this._userData); 
     } else { 
     this.httpObservable = this.http.get(AppConstants.USER_URL + "userInfo/" + userID, { headers: headers }) 
      .map((res: Response) => res.json()) 
      .do((data: GrcUser) => { 
      this._userData = data; 
      if (!data) { 
      this.noteService.add(new Note('danger', 'Failed to load user 
      details')); 
       } 

      }).catch((err: any) => { 
       this.logger.error(err); 
       this.noteService.add(new Note('danger', 'Error while getting user details')); 
       return Observable.of(false); 
      }).share(); 
      return this.httpObservable; 
      } 
     } else { 
      this.noteService.add(new Note('danger', 'You are not logged in. Please log in and try again')); 
      return return Observable.of(false); 
    } 
    } 

在這裏的代碼中，請注意.share()方法。這將組播你的可觀察。 在您的任何其他成分：

export class WorkflowDisplayComponent implements OnInit { 
    userData: GrcUser; 

    constructor(private _userService: UserService,) { 
    } 
    ngOnInit(): void { 
    this._userService.getUserInfo() 
        .subscribe((userData: any) => { 
         if(userData !== false) { 
          this.userData = userData; 
         } 
        }); 
    } 
} 

這樣一來，你只是做一個HTTP調用，並在服務緩存它和所有的後續調用將從服務的存儲變量送達。