Angular의 HttpClient 소개

Angular 4.3은 HttpClient 라이브러리를 사용하여 http 요청을 보다 쉽게 처리할 수 있는 새로운 방법을 제공합니다. 현재 Http 라이브러리로 인해 주요 변경 사항이 발생하지 않도록 새 이름으로 사용할 수 있습니다. HttpClient는 또한 요청이나 응답을 모니터링하거나 수정하기 위한 진행 이벤트 및 인터셉터를 수신 대기하는 기능과 같은 고급 기능을 제공합니다.

HttpClient를 사용해 보려면 Angular 4.3 이상을 사용하고 있는지 확인하세요.

설치

먼저 앱 모듈의 @angular/common/http에서 HttpClientModule을 가져와야 합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

그런 다음 평소처럼 HttpClient를 사용할 수 있습니다.

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

기본 사용법

기본적인 GET, POST, PUT, PATCH 또는 DELETE 요청을 만드는 것은 이전 Http API에 익숙한 것과 매우 유사합니다. 주요 차이점 중 하나는 JSON 응답이 기본적으로 예상되므로 더 이상 명시적으로 JSON 응답을 구문 분석할 필요가 없다는 것입니다.

다음은 샘플 GET 요청입니다.

// ...

constructor(private http: HttpClient) {}

getData() {
  this.http.get(this.url).subscribe(res => {
    this.posts = res;
  });
}

응답으로 JSON 이외의 것을 예상하는 경우 responseType 키가 있는 개체를 사용하여 예상되는 응답 유형을 지정할 수 있습니다.

getData() {
  this.http.get(this.url, { responseType: 'text' }).subscribe(res => {
    this.data = res;
  });
}

또한 응답 형태에 대한 인터페이스를 정의하고 해당 인터페이스에 대한 유형 검사를 수행할 수 있습니다.

interface Post {
  title: string;
  body: string;
};

// ...

constructor(private http: HttpClient) {}

getData() {
  this.http.get<Post>(this.url).subscribe(res => {
    this.postTitle = res.title;
  });
}

기본적으로 HttpClient는 응답 본문을 반환합니다. 전체 응답을 얻기 위해 'response' 값으로 설정된 observe 키를 사용하여 개체를 전달할 수 있습니다. 이는 특정 헤더를 검사하는 데 유용할 수 있습니다.

getData() {
  this.http.get<Post>(this.url, { observe: 'response' }).subscribe(res => {
    this.powered = res.headers.get('X-Powered-By');
    this.postTitle = res.body.title;
  });
}

게시, 넣기 및 패치 요청

POST, PUT 또는 PATCH 요청을 하는 것은 쉽습니다.

postData() {
  this.http.post(this.url, this.payload).subscribe();
}

요청이 이루어지기 위해 여전히 구독해야 하는 방법에 주목하십시오. 구독 호출이 없으면 요청이 콜드됩니다. 분명히 응답이나 오류를 처리하고 싶을 것입니다.

postData() {
  this.http.post(this.url, this.payload).subscribe(
    res => {
      console.log(res);
    },
    (err: HttpErrorResponse) => {
      console.log(err.error);
      console.log(err.name);
      console.log(err.message);
      console.log(err.status);
    }
  );
}

요청 오류는 HttpErrorResponse 유형이며 무엇보다도 오류 이름, 오류 메시지 및 서버 상태를 포함합니다.

세 번째로 전달된 개체의 headers 또는 params 키를 사용하여 헤더 또는 쿼리 매개변수 전달 옵션을 POST, PUT 또는 PATCH 요청에 추가할 수도 있습니다. 논쟁:

updatePost() {
  this.http
    .put(this.url, this.payload, {
      params: new HttpParams().set('id', '56784'),
      headers: new HttpHeaders().set('Authorization', 'some-token')
    })
    .subscribe(...);
}

여기서 HttpParams 및 HttpHeaders 클래스의 사용에 주목하십시오. @angular/common/http에서도 가져와야 합니다.

진행 이벤트

HttpClient의 뛰어난 새 기능은 진행 이벤트를 수신하는 기능입니다. 이는 모든 유형의 요청에서 수행할 수 있으며 요청 이벤트의 수명 주기 동안 다양한 정보를 사용할 수 있습니다. 다음은 GET 요청이 포함된 전체 예입니다.

import { Injectable } from '@angular/core';
import {
  HttpClient,
  HttpRequest,
  HttpEvent,
  HttpEventType
} from '@angular/common/http';

@Injectable()
export class DataService {
  url = '/some/api';

  constructor(private http: HttpClient) {}

  getData() {
    const req = new HttpRequest('GET', this.url, {
      reportProgress: true
    });

    this.http.request(req).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          console.log('Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Response header received!');
          break;
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`Download in progress! ${ kbLoaded }Kb loaded`);
          break;
        case HttpEventType.Response:
          console.log('😺 Done!', event.body);
      }
    });
  }
}

먼저 HttpRequest 클래스의 인스턴스를 만들고 reportProgress 옵션을 사용하여 요청 개체를 빌드해야 합니다.
그런 다음 요청 개체를 구독하여 요청을 시작하고 요청 수명 동안 다양한 이벤트 유형을 수신합니다. 이벤트 유형에 따라 적절하게 대응할 수 있습니다. 사용 가능한 이벤트 유형은 Sent, UploadProgress, ResponseHeader, DownloadProgress, Response 및 사용자.
위의 예에서는 GET 응답에서 지금까지 다운로드한 데이터의 양을 가져오고 POST 또는 PUT 요청과 같은 경우 100 * event.loaded/event.total. 이렇게 하면 사용자에게 진행률 표시줄을 매우 쉽게 표시할 수 있습니다.

🤓 이 게시물은 HttpClient의 기본 사항을 다루었고 다음은 HttpClient의 킬러 기능인 인터셉터의 사용을 다룰 것입니다. 공식 문서로 이동하여 더 자세히 알아볼 수도 있습니다.