2017-07-30 44 views
-1

如何檢查服務是否已完成,然後運行代碼的其餘部分?
例如:
我想從API的一些數據是這樣的:角度2檢查服務是否完成

get_user_info(token: string): Observable<any> { 
    return this.http.get(this.home + 'api/home/account/excerpt?token=' + token) 
    .map((response: Response) => { 
     return response.json().result; 
    }); 
} 

,我想從get_user_info訂閱數據:

retrieve_user_info() { 
    this.http.get_user_info(this.back_result.token).subscribe(
     (result: sendBackUserInfo) => { 
      if (result.result == 1) { 
       this.user_info = result.user; 
      } else { 
       console.log(result.messages[0]); 
      } 
     } 
    ); 
} 

但問題是,當我打電話函數retrieve_user_info,它不立即獲取數據。
我該如何解決這個問題?

編輯:
我這是怎麼叫retrieve_user_info

submit_login_form() { 
this.http.login_user(this.username, this.password, this.result.language.code) 
    .subscribe((result: loginSendBackResult) => { 
     this.back_result = result; 
     this.retrieve_user_info(); 
     if (this.back_result.result == 1) { 
      this.show_modal = false; 
      console.log(user_info); 
      router.navigate(['home']); 
     } 
    }); 
} 
+0

你不能 「解決這個問題」,這是異步的。無論你需要做什麼你的數據,你需要在回調內做到這一點:) – Alex

+0

請顯示您實際使用該數據的代碼。你把它作爲'@Input()'發送給某個組件,或者你對它做了什麼? –

+0

@deezg問題已更新 – amirsa00

回答

0

這是不是JS的問題。您的服務器響應速度比您需要的慢。你想要這個數據在哪裏?在模板或其他功能。如果您希望在模板中使用它,您可以使用一個名爲ngOnInit()的函數捕獲它,該函數可以在組件類中聲明。

@Component({selector: 'my-cmp', template: `...`}) 
class MyComponent implements OnInit { 
    ngOnInit() { 
    // ... 
    } 
} 

https://angular.io/api/core/OnInit

如果其一種不同的方法。請詳細說明您如何以及在哪裏調用http請求,以及爲什麼您需要立即。

retrieve_user_info() { 
    this.http.get_user_info(this.back_result.token).subscribe(
     (result: sendBackUserInfo) => { 
      // Get both data in one request 
      // Better your REST API 
      // Do your checks with the dependent data 
      // If dependent data right then change the router guard 
      // https://angular.io/api/router/CanDeactivate 
      // Route the person using router 
      // https://angular.io/api/router/Router 
     } 
    ); 
} 
+0

點擊按鈕後我想獲取數據!此外,該按鈕是登錄一個用戶,但我需要一些額外的數據從服務器在用戶登錄過程完成之前!我希望我能清楚地解釋我的目的 – amirsa00

+0

我還是不明白。你爲什麼觸發兩個請求? – Gary

+0

使用編輯後的邏輯。我不知道你需要什麼額外的數據,它應該是什麼。你必須詳細說明你是不可理解的 – Gary

0

您可能使用:

subscribe(next?: (value: T) => void, 
      error?: (error: any) => void, 
      complete?:() => void): Subscription; 

將只在next?已成功完成,因此可以確保數據已恢復執行complete?部分。

+1

你不需要,也可能不想,直到觀察結束。您只需等待直到下一個回調被調用。 – 2017-07-30 10:00:18

1

您可以使用flatMap來鏈接您的請求。你的命名也讓我有點困惑。在提及服務方法時,我會將服務命名爲service而不是http,以分隔我們發出http請求的位置以及我們在服務中調用方法的位置。所以我在這些地方使用了service

import "rxjs/add/operator/mergeMap"; 
submit_login_form() { 
    this.service.login_user(...) 
    .flatMap((result: loginSendBackResult) => { 
     this.back_result = result; 
     return this.retrieve_user_info(); 
    }); 
    .subscribe(data => { 
     if(this.back_result.result == 1) { 
      console.log(this.user_info) 
      .... 
     } 
    }) 
} 

和你retrieve_user_info()

retrieve_user_info() { 
    return this.service.get_user_info(this.back_result.token) 
    .map((result: sendBackUserInfo) => { 
     if (result.result == 1) { 
      return this.user_info = result.user; 
     } else { 
      console.log(result.messages[0]); 
     } 
    }); 
} 
+0

一個小小的演示...... http://plnkr.co/edit/FTDqGndQlbqJ8pUtRyWZ – Alex

+0

你也可以考慮將所有「不必要的邏輯」從組件中移除到服務上:) – Alex