Axios

브라우저와 Node.js 환경에서 동작하는 HTTP 클라이언트 라이브러리입니다.

• Nest.js에서는 Axios를 감싸서 내장된 HttpModule을 통해 노출한다.
  HttpModule은 Axios 기반의 메서드를 노출하는 HttpService 클래스를 내보낸다.
  또한 이 라이브러리는 HTTP 응답을 Observables로 변환합니다.

주요 기능

• HTTP 요청 보내기
  GET, POST, PUT, DELETE 등의 HTTP 요청을 보낼 수 있습니다.

• Promise 기반
  비동기 처리를 위해 Promise 기반으로 동작합니다.

• 요청/응답 인터셉터
  요청이나 응답을 가로채기(intercept)하여 로깅, 수정, 인증 토큰 추가 등의 작업을 수행할 수 있습니다.

• 자동 JSON 데이터 처리
  요청 데이터를 JSON으로 직렬화하고, 응답 데이터를 JSON으로 자동 변환합니다.

• 설정 및 기본값 지원
  기본 URL, 헤더 등을 설정하여 모든 요청에 기본값을 적용할 수 있습니다.

• 브라우저와 Node.js 지원
  브라우저에서는 XMLHttpRequest, Node.js에서는 HTTP 모듈을 기반으로 작동합니다.

주요 기능

• HTTP 요청 보내기
  GET, POST, PUT, DELETE 등의 HTTP 요청을 보낼 수 있습니다.

• Promise 기반
  비동기 처리를 위해 Promise 기반으로 동작합니다.

• 요청/응답 인터셉터
  요청이나 응답을 가로채기(intercept)하여 로깅, 수정, 인증 토큰 추가 등의 작업을 수행할 수 있습니다.

• 자동 JSON 데이터 처리
  요청 데이터를 JSON으로 직렬화하고, 응답 데이터를 JSON으로 자동 변환합니다.

• 설정 및 기본값 지원
  기본 URL, 헤더 등을 설정하여 모든 요청에 기본값을 적용할 수 있습니다.

• 브라우저와 Node.js 지원
  브라우저에서는 XMLHttpRequest, Node.js에서는 HTTP 모듈을 기반으로 작동합니다.

사용

@Injectable()
export class CatsService {
  constructor(private readonly httpService: HttpService) {}

  findAll(): Observable<AxiosResponse<Cat[]>> { // 특정 형태로 AxiosResponse 받기
    return this.httpService.get('http://localhost:3000/cats'); 
    // httpService를 통해 get 수행
    // 모든 HttpService 메서드는 Observable 객체로 래핑된 AxiosResponse를 반환
  }
}

AxiosResponse

AxiosResponse는 axios 라이브러리에서 HTTP 요청의 응답을 나타내는 객체

주요 속성

data: 서버로부터 반환된 응답 데이터.
status: HTTP 상태 코드 (예: 200, 404, 500).
statusText: 상태 코드의 텍스트 설명 (예: "OK", "Not Found").
headers: 응답 헤더.
config: 요청에 사용된 설정.

response.data

response.data는 서버로부터 반환된 JSON 또는 응답 본문(body)을 포함합니다.

예를 들어, 서버가 아래와 같은 JSON을 반환했다고 가정할 경우, 아래의 데이터 전체 객체

{
  "success": true,
  "data": {
    "id": 123,
    "phone": "123-456-7890"
  }
}

response.data.data

위의 응답 객체의 내부 속성 중data에 접근한다.
이 접근 방식은 서버가 응답 데이터를 특정 구조(ResponseDto)로 래핑하여 반환할 때 사용됩니다.
data 속성만 추출하면 클라이언트는 불필요한 메타 정보(success 등) 없이 순수 데이터를 사용할 수 있습니다.

• CatResponseDto의 형태가 아래와 같다고 가정

interface CatResponseDto<T> {
  success: boolean;
  data: T;
}

여기서 data 속성은 실제로 클라이언트가 필요한 유효한 데이터를 담고 있습니다.

• 예를 들어, CatResponseDto<PhoneSendResponse>

{
  "success": true,
  "data": { // PhoneSendResponse 내용
    "id": 123,
    "phone": "123-456-7890",
    "status": "sent"
  }
}

• response.data.data
  PhoneSendResponse의 내용만 추출한다.

{
  "id": 123,
  "phone": "123-456-7890",
  "status": "sent"
}

HttpService

HttpService는 NestJS가 제공하는 HTTP 클라이언트 서비스로, axios를 감싸는 래퍼(wrapper)

• RxJS (리액티브 프로그래밍)의 Observable로 요청과 응답을 처리하며, 이를 통해 반응형 프로그래밍을 지원한다.

  Observable : 데이터 스트림(stream)을 처리하기 위한 객체로, 비동기 데이터(예: 이벤트, HTTP 응답, 사용자 입력)를 다룰 때 사용된다.

Observable 사용 방법
Http 요청 - Observable에 대한 설명

• 데이터를 사용할 경우 .subscribe나 toPromise()를 통해 데이터를 사용해야 한다.

const response$ = this.httpService.post('/user/login', data);
response$.subscribe(response => {
  console.log(response.data);
});

httpService.axiosRef

axiosRef는 NestJS의 HttpService 내부에서 사용되는 axios 인스턴스를 직접 참조한다.
이를 통해 Observable 대신 axios의 기본 Promise 기반 API를 사용할 수 있다.

• NestJS 없이 순수 axios의 동작을 기대하거나 RxJS를 사용하지 않으려는 경우에 유용하다.

• axios의 모든 기본 기능(예: 커스텀 인스턴스 설정, 인터셉터 추가 등)을 직접 활용할 수 있다.

• NestJS의 Observable 생태계를 사용하지 않는 간단한 요청 처리에 적합하다.

• 데이터를 처리할 때 await을 사용하여 간단하게 처리할 수 있다.

const response = await this.httpService.axiosRef.post('/user/login', data);
console.log(response.data);

---

https://velog.io/@hing/NestJS-공식문서-HTTP-module