[Nest.JS] Axios, Http 비동기 통신 라이브러리

 

 

요새 외부업체들과 협업이 잦아지면서 API를 연동 시키기 위해 Axios를 많이 사용하고 있다.

 

그래서 이 참에 Axios에 대해서 제대로 알고 사용할 겸 포스팅을 해보려고 한다. 

 

 

 

우선, Axios란 ?

 

Http클라이언트 라이브러리로서, 웹 애플리케이션에서 웹 API와 통신하는 데 사용되며, 

 

웹 브라우저와 Node.js 환경 모두에서 사용할 수 있다.

 

 

1. Promise 기반

Axios는 Promise 기반으로 작성되어 있어서, 콜백 대신 .then()과 .catch() 또는 async/await를 

 

사용하여 비동기 작업을 처리할 수 있다 .

 

이를 통해 비동기 작업을 처리 시, 코드의 가독성과 유지 관리성이 향상된다.

 

 

2. HTTP 메서드 지원

Axios는 다양한 HTTP 메서드 (GET, POST, PUT, DELETE, PATCH)를 사용하여 웹 API와 통신할 수 있다.

 

특정 메서드를 사용하려면 axios 객체의 메서드를 호출하면 된다.

 

ex) axios.get(), axios.post(), axios.put(), axios.delete()

 

 

3. 요청 및 응답 헤더 설정

Axios를 사용하여 요청과 응답 헤더를 쉽게 설정하고 가져올 수 있다.

 

요청 헤더를 설정할 때는 headers 옵션을 사용하며, 응답 헤더는 response.headers 객체를 통해 접근할 수 있다.

 

예를 들어, 헤더에 인증 토큰을 추가하는 방법은 다음과 같다.

 

 

new.service.ts

 

이런식으로 헤더안에 Authorization: 으로 관련 인증 토큰값을 넣으면 된다.

 

 

4. 요청 및 응답 데이터 처리

Axios는 요청 및 응답 데이터를 쉽게 처리할 수 있는 기능을 제공한다.

 

기본적으로 요청 및 응답 데이터는 JSON 형식으로 자동 변환되며

 

사용자 정의 데이터 변환기를 사용하여 요청 및 응답 데이터를 변환할 수도 있다.

 

 

5. 요청 취소 및 중복 요청 처리

Axios에서는 요청을 취소할 수 있는 CancelToken을 지원한다.

 

이를 활용하여 이미 시작된 요청을 취소할 수 있고, 서버의 부하를 줄일 수 있다.

 

 

6. 타임아웃 및 에러 처리

Axios는 요청에 대한 타임아웃을 설정할 수 있으며, 타임아웃이 발생하면 에러를 자동으로 처리한다.

 

또한, 네트워크 오류, 서버 응답 오류 등 다양한 종류의 에러를 적절하게 처리할 수 있는 기능을 제공한다.

 

 

 

 

이제 Axios 사용방법에 대해서 알아보자.

 

npm install axios

 

NestJS에서 Axios를 사용하려면 다음 명령을 사용하여 설치해야 한다.

 

 

 

이제 Axios를 활용한 간단한 예제 코드를 보자.

 

 

1. Get

 

 

 

이런식으로 간단하게 headers의 값만 넣어서 get요청을 할 수 있다.

 

 

 

2. Post

 

 

 

Req 값으로 "id_usr"를 넣어야 해서 url 뒤에 넣어주면 정상적으로 post가 작동한다.

 

 

 

3. 요청 및 응답 인터셉터

 

const axios = require('axios');

// 요청 인터셉터
axios.interceptors.request.use((config) => {
  config.headers['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';
  return config;
}, (error) => {
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use((response) => {
  if (response.status === 200) {
    console.log('Request successful');
  }
  return response;
}, (error) => {
  if (error.response.status === 401) {
    console.log('Unauthorized');
  }
  return Promise.reject(error);
});

axios.get('https://google.com/posts')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

 

 

 

4. 요청 취소

 

const axios = require('axios');

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://google.com/posts', {
  cancelToken: source.token,
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error(error);
    }
  });

// 요청 취소
source.cancel('Operation canceled by the user.');

 

 

 

5. 타임아웃 설정

 

const axios = require('axios');

axios.get('https://google.com/posts', {
  timeout: 1000, // 1초 이내에 응답이 없으면 타임아웃
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.code === 'ECONNABORTED') {
      console.log('Timeout error:', error.message);
    } else {
      console.error(error);
    }
  });