HttpModule과 HttpClientModule의 차이점

Angular 4 앱을 테스트하기 위해 모의 웹 서비스를 구축하는 데 사용할 수있는 것은 무엇입니까?

Angular 4.3.x 이상을 사용 HttpClient하는 HttpClientModule경우 클래스를 사용하십시오 .

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

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

다음과 같이 개선 http된 @angular/http모듈 에서 업그레이드 된 버전입니다 .

• 인터셉터를 사용하면 미들웨어 로직을 파이프 라인에 삽입 할 수 있습니다.
• 변경할 수없는 요청 / 응답 객체
• 요청 업로드 및 응답 다운로드 모두에 대한 진행 이벤트

Insider의 가이드에서 Angular의 인터셉터 및 HttpClient 메커니즘에 대한 작동 방식을 읽을 수 있습니다 .

• JSON 본문 유형에 대한 지원을 포함하여 유형이 지정된 동기 응답 본문 액세스
• JSON은 기본값으로 가정되며 더 이상 명시 적으로 구문 분석 할 필요가 없습니다.
• 요청 후 검증 및 플러시 기반 테스트 프레임 워크

앞으로 http 클라이언트는 더 이상 사용되지 않습니다. 커밋 메시지 와 공식 문서에 대한 링크는 다음과 같습니다 .

또한 오래된 http는 Httpnew 대신 class token을 사용하여 주입되었습니다 HttpClient.

import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}

또한 새로운 기능 HttpClient은 tslib런타임 에 필요한 것처럼 보이 므로 다음을 사용하는 경우 설치 npm i tslib하고 업데이트 system.config.js해야합니다 SystemJS.

map: {
     ...
    'tslib': 'npm:tslib/tslib.js',

SystemJS를 사용하는 경우 다른 맵핑을 추가해야합니다.

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

반복적이지 않고 다른 방식으로 요약하기 만하면됩니다 (새로운 HttpClient에 추가 된 기능).

• JSON에서 객체로 자동 변환
• 응답 유형 정의
• 이벤트 발생
• 헤더의 단순화 된 구문
• 인터셉터

이전 "http"와 "HttpClient"의 차이점을 다루는 기사를 작성했습니다. 목표는 가능한 가장 쉬운 방법으로 설명하는 것이 었습니다.

Angular의 새로운 HttpClient에 대해 간단히

이것은 좋은 참조이며, http 요청을 httpClient로 전환하는 데 도움이되었습니다.

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

차이점 측면에서 두 가지를 비교하고 코드 예제를 제공합니다.

이것은 프로젝트에서 httpclient로 서비스를 변경하는 동안 처리 한 몇 가지 차이점입니다 (내가 언급 한 기사에서 차용).

가져 오기

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

응답 요청 및 파싱 :

@ 각도 / http

 this.http.get(url)
      // Extract the data in HTTP Response (parsing)
      .map((response: Response) => response.json() as GithubUser)
      .subscribe((data: GithubUser) => {
        // Display the result
        console.log('TJ user data', data);
      });

@ 각도 / 공통 / http

 this.http.get(url)
      .subscribe((data: GithubUser) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

참고 : 더 이상 반환 된 데이터를 명시 적으로 추출 할 필요가 없습니다. 기본적으로, 가져온 데이터가 JSON 유형 인 경우 추가 작업을 수행 할 필요가 없습니다.

그러나 텍스트 또는 얼룩과 같은 다른 유형의 응답을 구문 분석해야하는 경우 responseType요청에 입력 을 추가해야합니다 . 이렇게 :

responseType옵션으로 GET HTTP 요청하기 :

 this.http.get(url, {responseType: 'blob'})
      .subscribe((data) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

인터셉터 추가

또한 모든 요청에 ​​승인 토큰을 추가하기 위해 인터셉터를 사용했습니다.

이것은 좋은 참조입니다 : https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

이렇게 :

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // get the token from a service
        const token: string = this.currentUserService.token;

        // add it if we have one
        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        // if this is a login-request the header is 
        // already set to x/www/formurl/encoded. 
        // so if we already have a content-type, do not 
        // set it, but if we don't have one, set it to 
        // default --> json
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        // setting the accept header
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

꽤 좋은 업그레이드입니다!

강력한 형식의 콜백과 함께 HttpClient 를 사용할 수있는 라이브러리가 있습니다 .

이러한 콜백을 통해 데이터와 오류를 직접 사용할 수 있습니다.

Observable과 함께 HttpClient를 사용할 때는 나머지 코드에서 .subscribe (x => ...) 를 사용해야 합니다.

때문이다 관찰 가능한 < HttpResponse< T>> 에 연결되어 HttpResponse에 .

이 긴밀하게 커플 HTTP 층 와 코드의 나머지 부분 .

이 라이브러리는 .subscribe (x => ...) 부분을 캡슐화하고 모델을 통해 데이터와 오류 만 노출합니다.

강력한 형식의 콜백을 사용하면 나머지 코드에서 모델 만 처리하면됩니다.

라이브러리를 angular-extended-http-client라고 합니다.

GitHub의 앵귤러 익스텐트 http 클라이언트 라이브러리

NPM의 앵귤러 확장 HTTP 클라이언트 라이브러리

사용하기 매우 쉽습니다.

샘플 사용법

강력한 유형의 콜백은

성공:

• IObservable < T>
• IObservableHttpResponse
• IObservableHttpCustomResponse < T>

실패:

• IObservableError < TError>
• IObservableHttpError
• IObservableHttpCustomError < TError>

프로젝트 및 앱 모듈에 패키지 추가

import { HttpClientExtModule } from 'angular-extended-http-client';

@NgModule 가져 오기에서

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

모델

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

당신의 서비스

서비스에서 이러한 콜백 유형으로 매개 변수를 작성하기 만하면됩니다.

그런 다음 HttpClientExt 의 get 메소드로 전달하십시오.

import { Injectable, Inject } from '@angular/core'
import { RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    getRaceInfo(success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.get(url, ResponseType.IObservable, success, ErrorType.IObservableError, failure);
    }
}

구성 요소

컴포넌트에서 서비스가 주입되고 아래와 같이 getRaceInfo API가 호출됩니다.

  ngOnInit() {    
    this.service.getRaceInfo(response => this.result = response.result,
                                error => this.errorMsg = error.className);

  }

, 두 응답 및 오류 콜백 반환 강력하게 입력된다. 예 : response 는 RacingResponse 유형 이고 error 는 APIException 입니다.

이러한 강력한 형식의 콜백에서만 모델을 처리합니다.

따라서 나머지 코드는 모델에 대해서만 알고 있습니다.

또한 기존 경로를 계속 사용하고 Service API에서 Observable < HttpResponse<T >>를 반환 할 수 있습니다 .

HttpClient 는 4.3과 함께 제공되는 새로운 API이며, 진행 이벤트, 기본적으로 json deserialization, 인터셉터 및 기타 여러 가지 기능을 지원하도록 API를 업데이트했습니다. 자세한 내용은 여기 https://angular.io/guide/http

Http 는 이전 API이므로 더 이상 사용되지 않습니다.

사용법은 기본 작업과 매우 유사하기 때문에 HttpClient를 사용하는 것이 더 현대적이고 사용하기 쉬운 대안이므로 권장합니다.