Angular2 함수를 하나씩 차례로 호출합니다.

Question

일부 매개 변수를 사용하고 양식의 드롭 다운 메뉴를 채우는 값 목록을 반환하는 Angular2 프로젝트에 서비스가 있습니다. 양식 구성 요소가 초기화 될 때 여러 매개 변수로 동일한 서비스를 여러 번 호출하여 여러 가지 다른 드롭 다운 메뉴를 정의해야합니다. 그러나 모두 호출하면 마지막 호출은 이전 호출을 clobbers라고합니다. 후속 호출이 무시되기 때문일 수 있습니다 또는 이전 페치를 취소합니다.

각각의 호출을 각각의 함수로 나눠 봤지만 첫 번째 완료 이후까지 두 번째 함수가 호출되지 않도록 각 함수를 직렬로 호출해야합니다. 각 함수는 독자적으로 작동하지만 둘 이상을 호출하면 마지막 매개 변수 만 성공하고 첫 번째 매개 변수는 오류와 함께 실패합니다 (마무리 전에 새 매개 변수가 호출 될 때 서비스 자체가 현재 페치를 종료하므로 오류가 발생 함).

this.fetchValueListOne(); 
this.fetchValueListTwo(); 
this.fetchValueListThree(); 

내가 약속이 작품을 만들려고 노력하지만, 다시 밖으로 결과 데이터를 얻을 수없는 나는이 기능에 액세스 할 수 원하는 서비스를 전달하는 데에 꽤 빨리 지옥 범위 지정 및에 감아 다시 - 각 서비스 호출은 세 개의 매개 변수를 취한 다음 구성 요소에 정의되고 양식에서 사용되는 특정 this.valueList [] 변수를 설정합니다.

또한 함수의 목록을 변수로 만든 다음 반복하면서 시도했지만 약속과 마찬가지로 동일한 범위 지정 문제가 발생했습니다.

서비스는 Observable을 반환하고 해당 Observable을 구독하는 함수는 데이터를 검색하여 드롭 다운 값 목록이 바인딩되는 구성 요소의 배열 변수에 할당합니다.

기능은 다음과 같이 : 당신은 수신 된 데이터를

fetchValueListOne() { 
     this.dataSvc.getValueList('Val-List-One', this.stateSvc.currentContext, this.stateSvc.currentLanguageCode) 
      .map(response => response.json()) 
      .subscribe(
      data => { 
       this.valListOne = data; 
      }, 
      err => console.log('Error', err), 
     () => { 
       console.log('this.valListOne', this.valListOne); 
      } 
     ); 
    } 

Answer 1

전화 기능. 예를 들면 :

public fetchValueListOne(): Observable<any> { // Get firstData } 
public fetchValueListTwo(): Observable<any> { // Get secondData} 
public fetchValueListThree(): Observable<any> { // Get thirdData} 

당신이 함수를 호출 할 때 이전의 데이터를 가지고 있음을 확신 할 것이다이 방법 : 같은

this.fetchValueListOne().subscribe((firstData) => { 
      this.fetchValueListTwo(firstData); 
      // Do something with firstData 
     } 
    ); 

    this.fetchValueListTwo().subscribe((secondData) => { 
      this.fetchValueListThree(secondData); 
      // Do something with secondData 
     } 
    ); 

    this.fetchValueListThree().subscribe((thirdData) => { 
      // Do something with thirdData 
     } 
    ); 

그리고 Observable 이러한 함수를 선언.

Answer 2

SrAxi가 올바른 방향으로 나를 가리켰다. 궁극적으로 나는 약속이 최상의 해결책으로 밝혀졌고, 특히 Promise/.then 메커니즘이 문제를 멋지게 해결 한 것처럼 문제를 해결했다.

fetchValueList(listCode): Promise<any> { 
     return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode) 
      .map(response => response.json()) 
      .toPromise(); 
    } 

    initializeDropDowns() { 
     this.fetchValueList('First-Val-List') 
      .then(data => { 
       this.firstValList = data; 
       return this.fetchValueList('Second-Val-List') 
      }).then(data => { 
       this.secondValList = data; 
       return this.fetchValueList('Third-Val-List') 
      }).then(data => { 
       this.thirdValList = data; 
      }) } 

구성 요소에 함수를 정의한 다음 ngOnInit에서 initializeDropDowns()를 호출했습니다.

fetchValueList 함수는 Promise를 반환하므로 첫 번째 호출은 첫 번째 listCode를 전달하고 Promise가 해석하면 반환 값은 this.firstValList 변수에 할당 할 수있는 .then 블록의 데이터 변수에 있습니다. 함수가 데이터를 반환 했으므로 서비스가 완료되었으며 두 번째 listCode로 다시 호출하는 것이 안전하다는 것을 알고 있으므로 반환 값은 다음 .then 블록의 데이터 변수에 있으며이 값을 this.secondValList 변수에 할당합니다.

모든 변수를 채우기 위해 필요한만큼 체인을 연결할 수 있으며 마지막 코드 블록에서 return 문을 생략하고 블록이 종료됩니다.

구성 요소가 초기화 될 때 여러 번 호출해야하는 단일 서비스가 있고 서비스에서 가져 오기를 완료하고 다시 호출하기 전에 값을 반환해야하는 매우 구체적인 사용 사례입니다. 이 경우 Promise/.then 방법이 이상적이었습니다.