Angular2 RxJS - 多個HttpGet - 當它們全部完成時通知我

Question

我有一個組件可以創建3個獨立的http調用。一旦所有3個電話完成，我想執行一個操作（隱藏我的加載欄）。

我認爲10.concat運算符是解決方案，但我無法解決如何使用它。我只希望我的http調用執行一次，但因爲我有多個.subscribe（）調用（原始調用和concat），所以我明白爲什麼我的http調用是以2X進行的。我只是不知道如何編碼。也許我需要forkJoin？.Concat？

我目前Angular2 Component.ts - 使得HTTP調用2X

const form$ = this.myService.getSubmissionForm(this.submissionId);   
this.subscription = form$ 
    .subscribe((submissionForm: SubmissionForm) => {      
     this.submissionForm = submissionForm;        
    }, 
    (error: any) => { },  /* Error */ 
    () => { });    /* Complete success*/ 

const comments$ = this.myService.getComments(this.submissionId); 
this.subscription = comments$.subscribe(
    (comments: Comment[]) => {     
     this.submissionComments = comments; 
    }); 

const documents$ = this.myService.getRelatedDocuments(this.submissionId); 
this.subscription = documents$.subscribe(
    (viewModel: SubmissionDocumentsSection) => { 
     this.submissionDocumentSection = viewModel; 
    }); 

// Inform any listeners that our async calls have all completed. 
const combined$ = Observable.concat(form$, comments$, documents$); 
combined$.subscribe(
    () => { }, 
    (error: any) => {     
     this.ngInitLoadComplete.emit(false);    
    }, 
    () => {     
     this.ngInitLoadComplete.emit(true);    
    }); 

我想我Want.ts

const form$ = this.myService.getSubmissionForm(this.submissionId);   
const comments$ = this.myService.getComments(this.submissionId); 
const documents$ = this.myService.getRelatedDocuments(this.submissionId); 

// Inform any listeners that our async calls have all completed. 
const combined$ = Observable.concat(form$, comments$, documents$); 

/** Bad syntax here! How do I subscribe and get results? **/ 
combined$.subscribe(
    (submissionForm: SubmissionForm , 
    comments: Comment[], 
    viewModel: SubmissionDocumentsSection ) => { 
     this.submissionForm = submissionForm;   
     this.submissionComments = comments; 
     this.submissionDocumentSection = viewModel; 
    }, 
    (error: any) => {     
     this.ngInitLoadComplete.emit(false);    
    }, 
    () => {     
     this.ngInitLoadComplete.emit(true);    
    }); 

我的語法是不正確的，我有麻煩尋找解決方案。 我該如何做到這一點？

Answer 1

您應該可以使用Observable.forkJoin來合併請求，然後在單個回調中使用這些數據。

從docs,Observable.forkJoin並行運行所有可觀察序列並收集它們的最後一個元素。

像這樣：

Observable.forkJoin([ 
      this.myService.getSubmissionForm(this.submissionId), 
      this.myService.getComments(this.submissionId), 
      this.myService.getRelatedDocuments(this.submissionId)]) 
      .subscribe((data: [SubmissionForm, Comment[], SubmissionDocumentsSection]) => { 
       this.submissionForm = data[0];   
       this.submissionComments = data[1]; 
       this.submissionDocumentSection = data[2]; 
      }, 
      (error: any) => {     
       this.ngInitLoadComplete.emit(false);    
      }, 
      () => {     
       this.ngInitLoadComplete.emit(true);    
      }); 

編輯

每次調用一個方法上myService返回一個可觀察的。如果您使用Share運算符，則這些觀測值可以多次使用，因此您可以訂閱它們並加入它們以瞭解它們何時全部完成。

這是你怎麼能每個人觀察到返回後執行操作，一旦他們都完成：

let formObservable = this.myService.getSubmissionForm(this.submissionId).share(); 
let commentsObservable = this.myService.getComments(this.submissionId).share(); 
let docsObservable = this.myService.getRelatedDocuments(this.submissionId).share(); 

formObservable.subscribe((submissionForm: SubmissionForm) => {      
    this.submissionForm = submissionForm;        
}); 

commentsObservable.subscribe((comments: Comment[]) => {     
    this.submissionComments = comments; 
}); 

docsObservable.subscribe((viewModel: SubmissionDocumentsSection) => { 
    this.submissionDocumentSection = viewModel; 
}); 

Observable.forkJoin([ 
      formObservable, 
      commentsObservable, 
      docsObservable]) 
      .subscribe(() => {}, 
      (error: any) => {     
       this.ngInitLoadComplete.emit(false);    
      }, 
      () => {     
       this.ngInitLoadComplete.emit(true);    
      }); 

退房的Plunkr。