[angular] HttpModule과 HttpClientModule의 차이점

강력한 형식의 콜백과 함께 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 >>를 반환 할 수 있습니다 .

---

답변