[Angular] 서버에서 데이터 받아오기 (HttpClient, Observable)

비동기 작업으로 서버에서 데이터 받아오기(공식문서)

 

■ HttpClient

■ Observable

 

[1] Observable 심볼 로드하기

- RxJS에서 Observable을 import 한다.

 

import { Observable } from 'rxjs';

 

[2] 데이터 바인딩

- 컴포넌트의 users$ 멤버변수를 만들고 비동기호출 코드를 constructor함수에서 호출한다.

 

export class UsersComponent {
  users$: Observable<any>;

  constructor(
    private apiService: ApiService
    ) {
    this.loadUsers();
  }

  loadUsers(): void {
    this.users$ = this.apiService.req('users/list', null);
  }
}

 

해당 방법은 현재 회사에서 사용하는 방법이다. 앵귤러 공식문서에는 조금 다르게 설명하지만, 결론적으로 "Observable"이 핵심이다. 그리고 Observable을 통해 가져온 데이터는 Observable.subscribe( ) 메서드를 통해 출력할 수 있다.

 

또 다른 방법으로는 "HttpClient"를 사용하는 것이다. 현재 회사에서 서버와 데이터를 주고 받을때 Observable로 테이블 정보를 받아오고, HttpClient는 사용자 인증을 처리하는 것 같다. (auth.service.ts)

 

"이후에 HTTP에 대해서 알아볼 때 Angular의 HttpClient 클래스가 제공하는 메소드는 모두 RxJS가 제공하는 Observable 타입을 반환한다는 것을 다시 한 번 살펴볼 것입니다."

- 그렇기 때문에 HttpClient와 Observable 타입(심볼)은 같이 사용되어 지는 편인 것 같다.

 

---

 

Angular가 제공하는 옵저버블(공식문서)

1. 컴포넌트간 데이터 전달하기 - @Output, @Input, EventEmitter, emit( )

"컴포넌트 밖으로 데이터를 보내려면 @Output() 데코레이터가 지정된 프로퍼티에 EventEmitter 인스턴스를 사용합니다. EventEmitter는 RxJS가 제공하는 Subject 클래스를 확장한 클래스입니다. Subject에 있는 기능 외에 EventEmitter가 제공하는 emit() 메소드를 사용하면 데이터를 옵저버블에 실어 보낼 수 있습니다. 그리고 이렇게 보낸 데이터는 이 옵저버블을 구독하는 옵저버의 next() 메소드가 받을 수 있습니다."

 

2. HTTP

"Angular에서 제공하는 HttpClient는 HTTP 요청 결과를 옵저버블로 반환합니다. 그래서 http.get(‘/api’)를 실행한 결과도 옵저버블입니다. 옵저버블을 사용하는 방식은 Promise를 사용하는 방식과 비교했을 때 더 좋은 점이 몇가지 있습니다."

 

① 옵저버블은 서버에서 받은 응답을 다른 객체로 변환하지 않습니다. Promise를 사용하면 .then()으로 체이닝 할때마다 새로운 객체가 생성되던 것과는 다릅니다. 대신, 옵저버블은 연산자를 사용해서 옵저버블의 모양을 조작합니다.
② unsubscribe() 메소드를 실행하면 아직 완료되지 않은 HTTP 요청을 취소할 수 있습니다.
③ 서버의 응답 진행률을 확인할 수 있습니다.
④ 실패한 요청을 재시도하는 것도 간단합니다.

 

3. Router

"Router.events는 라우팅 이벤트를 옵저버블로 전달합니다. 이 중 필요한 이벤트만 처리하려면 RxJS에서 제공하는 filter() 연산자를 사용할 수 있으며, 이 프로퍼티를 구독하면 네비게이션 진행상황에 맞게 이벤트를 처리할 수 있습니다."