angular 2+ 약속, 관측 가능 및 비동기 파이프

Question

저는 앵글 4에서 첫 프로젝트를 진행하면서 작은 문제가 발생했습니다.

서버를 호출 할 때 지연이 발생하고 비동기 파이프를 사용하여 서버에서 가져온 데이터를 표시하는 방법을 배웠습니다.

하지만 문제는 예를 들어 서버에 HTTP 호출을하고 이제 서버에서 정보가 다시 생길 때까지 기다리는 것입니다. 하지만 몇 가지 정보를 얻으려면 그 정보가 필요합니다. 따라서 런타임에 코드가 실행되고 할당 할 수있는 값이 없으므로 서버의 정보를 기다리는 할당 된 변수가 다시 정의되지 않은 상태로 되돌아옵니다.

서비스 호출을하고 적절한 방법으로 DoSomething에 설정을 적용 할 때까지 기다리지 않는 방법은 무엇입니까? 또한 앱을 통해 설정을 사용하는 경우 어떻게 저장하면 설정이 필요할 때마다 계속해서 HTTP 호출을하지 않습니다.

내 직관은 app.componenet.ts가 전화를 걸고 저장하도록하는 것이 었습니다.

감사합니다.

Answer 1

이 실제로 달성하기 위해 노력하는지에 따라 할 일 또는지도 운영자를위한 완벽한 사용 사례입니다 : 당신이 실제로 싶지 않는 같이

this.settings = this.settingsService.getSettings().do(settings => this.doSomething(settings)); 

당신은 단지 "부작용"을 원하는 경우 디스플레이를 보내고있는 데이터에 영향을주기 위해서는 표시와 관련이없는 다른 작업을하고 싶지만 시퀀스의 특정 지점에서 일어날 필요가 있습니다 (종종 do()를 사용하여 페이지 전체 콘텐츠로드 팝업 또는 뭔가). doSomething()이 사용되지 않기 때문에 값을 반환하는지 여부는 중요하지 않습니다.

this.settings = this.settingsService.getSettings().map(settings => this.transformSettings(settings)); 

디스플레이로 전송하는 데이터를 실제로 변경하려는 경우지도 운영자가이 경우에 많이 사용됩니다. transformSettings()는 궁극적 인 가입자에게 전달 될 특정 값을 표시 할 값을 반환해야합니다. 당신의 구성 요소를 설정 $ IT 및 가입

private settingsSource = new BehaviorSubject(null); 
settings$ = this.settingsSource.asObservable().filter(e => !!e); //this prevents the initial null value from being sent 
loadSettings() { 
    this.http.get('settings').map(r => r.json()).subscribe(this.settingsSource); 
} 
constructor(private http: HttpClient) { 
    this.loadSettings(); 
} 

다음이 : 2 부에 관해서는

, 당신의 서비스 계층에 대한 행동 대상에 결과를 저장 위치는 필요한 모든 구성 요소를 항상 사용할 수 있도록 그것이 도착할 때마다 거기에있게 될 것입니다.

Answer 2

은 일반적으로 각도 2 반환 관측 가능 서비스입니다. http 요청은 서버에서 데이터를 반환하기 위해 가변적 인 시간이 걸리기 때문입니다.

getsettings 정확히하고있다하지 않도록 어떤

메신저,하지만 일반적인 셋업은 다음과 같다 : HTTP 요청이 클라이언트에 응답 한 후

//service layer 
    function getSettings() { 
     return this.http.get(`server-url`) 
      .map((response: Response) => <any>response.json()) 
      .catch(this.handleError); 
} 

private handleError(error: Response) { 
    return Observable.throw(error.json() || 'Server error'); 
} 
//in your component 
this.service.getSettings().subscribe(result => {this.settings = result}, error => {console.log("there was an error.")}); 

구독 부분이 발사됩니다. 길을 따라 당신을 도울

Answer 3

몇 가지 :

• 비동기 파이프가 큰 데이터가 서버에서 직접 봉사 할 준비가되었는지에 대한. 구성 요소에 필요하다면 비동기 파이프를 사용하지 말고 대신 구독하십시오.
• Angular는 http 요청에서 관측 가능 상태로 되돌릴 수 있습니다. 그런 다음 subcribe() 함수를 사용하여 데이터를 검색하거나 실패 할 경우 원하는 작업을 제공 할 수 있습니다. 특정 경우

  Here is a good tutorial on using http in an angular service

당신은 다음과 같이합니다 : 의도의 devs로하는 경우에

ngOnInit(){ 
    this.settings = this.settingsService.getSettings().subscribe((settings)=>{ 
    this.settings = settings; 
    console.log("Logging Settings: " + this.settings); 
} 

두 번째 질문에 대답하기 위해, 각도 서비스,의 Singleton Pattern를 따라하고 있습니다 전체 앱을 통해 공유 리소스. 즉, 액세스하는 모든 것이 다른 것과 동일한 인스턴스를 수신하고 있음을 의미합니다.