TypeScript를 사용하는 Angular2의 http 데이터에서 RxJS 관찰 가능한 항목 연결

TypeScript를 사용하는 Angular2의 http 데이터에서 RxJS 관찰 가능한 항목 연결

저는 지난 4년간 AngularJS 1.*와 함께 즐겁게 일한 후 현재 Angular2와 TypeScript를 독학하기 위해 노력하고 있습니다!내가 그것을 싫어한다는 것을 인정해야 하지만 나는 내 유레카의 순간이 얼마 남지 않았다는 것을 확신합니다...어쨌든, 나는 JSON을 서비스하는 가짜 백엔드에서 http 데이터를 가져올 서비스를 더미 앱에 작성했습니다.

import {Injectable} from 'angular2/core';
import {Http, Headers, Response} from 'angular2/http';
import {Observable} from 'rxjs';

@Injectable()
export class UserData {

    constructor(public http: Http) {
    }

    getUserStatus(): any {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.get('/restservice/userstatus', {headers: headers})
            .map((data: any) => data.json())
            .catch(this.handleError);
    }

    getUserInfo(): any {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.get('/restservice/profile/info', {headers: headers})
            .map((data: any) => data.json())
            .catch(this.handleError);
    }

    getUserPhotos(myId): any {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
            .map((data: any) => data.json())
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        // just logging to the console for now...
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }   
}

이제 구성 요소에서 둘 다 실행(또는 체인)하고 싶습니다.getUserInfo()그리고.getUserPhotos(myId)방법들.인 앵귤러JS 이것은 쉬웠습니다. 제 컨트롤러에서 저는 "운명의 피라미드"를 피하기 위해 이런 것을 할 것입니다.

// Good old AngularJS 1.*
UserData.getUserInfo().then(function(resp) {
    return UserData.getUserPhotos(resp.UserId);
}).then(function (resp) {
    // do more stuff...
}); 

이제 구성 요소에서 유사한 작업을 시도했습니다(교체)..then위해서.subscribe하지만 내 오류 콘솔은 미쳐가고 있습니다!

@Component({
    selector: 'profile',
    template: require('app/components/profile/profile.html'),
    providers: [],
    directives: [],
    pipes: []
})
export class Profile implements OnInit {

    userPhotos: any;
    userInfo: any;

    // UserData is my service
    constructor(private userData: UserData) {
    }

    ngOnInit() {

        // I need to pass my own ID here...
        this.userData.getUserPhotos('123456') // ToDo: Get this from parent or UserData Service
            .subscribe(
            (data) => {
                this.userPhotos = data;
            }
        ).getUserInfo().subscribe(
            (data) => {
                this.userInfo = data;
            });
    }

}

제가 뭔가 잘못하고 있는 게 분명해요Observables 및 RxJS를 사용하는 데 가장 적합한 방법은 무엇입니까?내가 바보같은 질문을 하는거라면 미안해요...하지만 미리 도와주셔서 감사합니다!또한 http 헤더를 선언할 때 함수에 코드가 반복되는 것을 발견했습니다...

당신의 사용 사례를 위해, 나는flatMap연산자가 필요합니다.

this.userData.getUserPhotos('123456').flatMap(data => {
  this.userPhotos = data;
  return this.userData.getUserInfo();
}).subscribe(data => {
  this.userInfo = data;
});

이렇게 하면 첫 번째 요청이 수신되면 두 번째 요청을 실행할 수 있습니다.flatMap연산자는 이전 요청(이전 이벤트)의 결과를 사용하여 다른 요청을 실행하려는 경우 특히 유용합니다.사용할 수 있도록 오퍼레이터를 가져오는 것을 잊지 마십시오.

import 'rxjs/add/operator/flatMap';

이 답변은 다음과 같은 세부 정보를 제공할 수 있습니다.

• TypeScript 오류 http.get(...)이 있는 Angular HTTP GET.map이 [null]의 함수가 아닙니다.

사용만 원하는 경우subscribe방법, 당신은 다음과 같은 것을 사용합니다.

this.userData.getUserPhotos('123456')
    .subscribe(
      (data) => {
        this.userPhotos = data;

        this.userData.getUserInfo().subscribe(
          (data) => {
            this.userInfo = data;
          });
      });

마지막으로, 두 요청을 동시에 실행하고 모든 결과가 있을 때 알림을 받으려면 다음을 사용하는 것을 고려해야 합니다.Observable.forkJoin(추가해야 합니다.import 'rxjs/add/observable/forkJoin'):

Observable.forkJoin([
  this.userData.getUserPhotos(),
  this.userData.getUserInfo()]).subscribe(t=> {
    var firstResult = t[0];
    var secondResult = t[1];
});

당신이 실제로 필요로 하는 것은switchMap교환입니다.초기 데이터 스트림(사용자 정보)을 사용하고 완료되면 관찰 가능한 이미지로 대체합니다.

당신의 흐름을 이해하는 방법은 다음과 같습니다.

• 사용자 정보 가져오기
• 해당 정보에서 사용자 ID 가져오기
• 사용자 ID를 사용하여 사용자 사진 가져오기

여기 데모가 있습니다.참고: 서비스를 조롱했지만 코드는 실제 서비스와 함께 작동합니다.

  ngOnInit() {
    this.getPhotos().subscribe();
  }

  getUserInfo() {
    return this.userData.getUserInfo().pipe(
      tap(data => {
        this.userInfo = data;
      }))
  }
  getPhotos() {
    return this.getUserInfo().pipe(
      switchMap(data => {
        return this.userData.getUserPhotos(data.UserId).pipe(
          tap(data => {
            this.userPhotos = data;
          })
        );
      })
    );
  }

언급URL : https://stackoverflow.com/questions/35268482/chaining-rxjs-observables-from-http-data-in-angular2-with-typescript