[http] Angular2 http.get (), map (), subscribe () 및 관찰 가능한 패턴-기본 이해

개념

짧은 관찰 시간은 비동기 처리 및 이벤트를 처리합니다. 약속과 비교하면 이것을 관찰 가능 항목 = 약속 + 이벤트라고 할 수 있습니다.

관찰 가능 항목의 장점은 게으르고 취소 할 수 있으며 일부 연산자 (예 : map, …)를 적용 할 수 있다는 것 입니다. 이를 통해 매우 유연한 방식으로 비동기식 작업을 처리 할 수 ​​있습니다.

옵저버 블의 최대 성능을 설명하는 훌륭한 샘플은 필터 입력을 해당 필터링 된 목록에 연결하는 방법입니다. 사용자가 문자를 입력하면 목록이 새로 고쳐집니다. Observable은 해당 AJAX 요청을 처리하고 입력에서 새로운 값으로 다른 요청이 트리거되면 이전 진행중인 요청을 취소합니다. 해당 코드는 다음과 같습니다.

this.textValue.valueChanges
    .debounceTime(500)
    .switchMap(data => this.httpService.getListValues(data))
    .subscribe(data => console.log('new list values', data));

( textValue필터 입력과 관련된 컨트롤입니다).

다음은 이러한 사용 사례에 대한보다 자세한 설명입니다. Angular 2에서 양식 변경을 감시하는 방법 .

AngularConnect 2015와 EggHead에는 두 가지 훌륭한 프레젠테이션이 있습니다.

• 약속 대 관찰 가능한 – https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
• 관찰 가능 생성-https: //egghead.io/lessons/rxjs-creating-an-observable
• RxJS 심층 https://www.youtube.com/watch?v=KOOT7BArVHQ
• 각도 2 데이터 흐름-https://www.youtube.com/watch?v= bVI5gGTEQ_U

Christoph Burgdorf는 또한이 주제에 관한 훌륭한 블로그 게시물을 작성했습니다.

• http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
• http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

행동

실제로 코드와 관련하여 두 가지 접근법을 혼합했습니다. 😉 다음은 다음과 같습니다.

• 직접 관찰 할 수있는 것을 관리하십시오 . 이 경우, subscribeObservable 에서 메소드 를 호출 하고 결과를 컴포넌트의 속성에 할당해야합니다. 그런 다음 뷰에서이 속성을 사용하여 콜렉션을 반복 할 수 있습니다.

  @Component({
    template: `
      <h1>My Friends</h1>
      <ul>
        <li *ngFor="#frnd of result">
          {{frnd.name}} is {{frnd.age}} years old.
        </li>
      </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })
  export class FriendsList implement OnInit, OnDestroy {
    result:Array<Object>;
  
    constructor(http: Http) {
    }
  
    ngOnInit() {
      this.friendsObservable = http.get('friends.json')
                    .map(response => response.json())
                    .subscribe(result => this.result = result);
     }
  
     ngOnDestroy() {
       this.friendsObservable.dispose();
     }
  }
  

  get와 map메소드 둘 다에서 나온 결과는 결과가 아닌 관찰 가능합니다 (약속과 같은 방식으로).

• Angular 템플릿으로 Observable을 관리하십시오 . async파이프를 활용 하여 관찰 가능 항목을 암시 적으로 관리 할 수도 있습니다 . 이 경우 subscribe메서드 를 명시 적으로 호출 할 필요가 없습니다 .

  @Component({
    template: `
      <h1>My Friends</h1>
      <ul>
        <li *ngFor="#frnd of (result | async)">
          {{frnd.name}} is {{frnd.age}} years old.
        </li>
      </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })
  export class FriendsList implement OnInit {
    result:Array<Object>;
  
    constructor(http: Http) {
    }
  
    ngOnInit() {
      this.result = http.get('friends.json')
                    .map(response => response.json());
     }
  }
  

관찰 가능 항목이 게으른 것을 알 수 있습니다. 따라서 해당 HTTP 요청은 subscribe메소드를 사용하여 리스너가 연결된 경우에만 호출 됩니다.

또한 map메소드가 응답에서 JSON 컨텐츠를 추출하고 관찰 가능한 처리에서 사용하는 데 사용됩니다.

티에리가 도움이 되었기를 바랍니다.

답변

import { HttpClientModule } from '@angular/common/http';

http.get('friends.json').subscribe(result => this.result =result);