Axios

Axios란?

▶ Axios는 JavaScript를 사용하여 HTTP 요청을 만들고 처리하는 라이브러리로, 주로 브라우저 및 Node.js 환경에서 사용되며 프로미스 기반의 API를 제공하여 비동기 작업을 쉽게 관리할 수 있게 해줍니다.

Axios의 주요 기능

1. 프로미스 기반

   Axios는 프로미스(Promise)를 기반으로 하기 때문에 비동기 작업을 처리하는 데 매우 유용하며, async와 await를 사용하여 코드의 가독성을 높일 수 있습니다.

2. 간편한 API

   간단하고 직관적인 API를 제공하여 HTTP 요청을 쉽게 보낼 수 있습니다.

3. 요청과 응답 인터셉터

   요청이나 응답을 가로채서 수정할 수 있는 인터셉터 기능을 제공합니다. 이를 통해 요청 전후에 작업을 수행하거나, 공통적인 에러 처리를 할 수 있습니다.

4. 자동 JSON 변환

   JSON 데이터를 자동으로 변환해주기 때문에 데이터 전송이 간편합니다.

5. 브라우저와 Node.js 지원

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

6. 취소 토큰

   요청을 취소할 수 있는 기능을 제공하여, 불필요한 요청을 방지하고 리소스를 절약할 수 있습니다.

7. 타임아웃 설정

   요청에 타임아웃을 설정할 수 있어, 응답 지연 시 적절한 대응을 할 수 있습니다.

Axios 설치 방법

• Axios는 npm을 통해 설치할 수 있으며, CDN을 통해 브라우저에서 직접 사용 가능합니다.

# npm을 통해 설치
npm install axios

# html에서 사용 시
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios 기본 사용법

01. HTTP 요청

• 다양한 HTTP 메서드를 사용하여 요청을 보낼 수 있습니다.

// GET 요청
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST 요청
axios.post('https://api.example.com/data', {
    name: 'John Doe',
    age: 30
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

02. async/await 사용

• async/await 구문을 사용하면 비동기 코드를 더욱 직관적으로 작성할 수 있습니다.

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

03. 요청과 응답 인터셉터

• 인터셉터를 사용하면 요청이나 응답을 가로채서 처리할 수 있습니다.

// 요청 인터셉터
axios.interceptors.request.use(config => {
  console.log('Request:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

04. 요청 취소

• Axios는 취소 토큰을 사용하여 요청을 취소할 수 있습니다.

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.error('Error:', error);
  }
});

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

05. 설정과 기본값

• Axios는 전역 설정과 인스턴스 설정을 지원합니다.

// 전역 설정
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

// 인스턴스 설정
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  });

Axios와 다른 HTTP 클라이언트 비교

01. Axios vs Fetch API

• Fetch API는 현대 브라우저에서 기본 제공하는 HTTP 요청을 위한 인터페이스입니다. 그러나 Axios와 비교했을 때 몇 가지 차이점이 있습니다.

1. 프로미스 폴리필

   Fetch API는 IE와 같은 구형 브라우저에서 지원되지 않으므로 폴리필이 필요할 수 있지만, Axios는 모든 환경에서 작동합니다.

2. 자동 JSON 변환

   Axios는 JSON 데이터를 자동으로 변환하지만, Fetch API는 .json() 메서드를 호출해야 합니다.

3. 인터셉터

   Fetch API는 인터셉터 기능을 제공하지 않으므로 요청과 응답을 가로채서 처리하려면 추가적인 코드가 필요합니다.

4. 취소 기능

   Fetch API는 기본적으로 요청 취소 기능을 제공하지 않으며, 이를 구현하려면 AbortController를 사용해야 합니다.

02. Axios vs jQuery.ajax()

• jQuery의 $.ajax() 메서드도 HTTP 요청을 처리하는 데 널리 사용되지만 Axios는 몇 가지 장점을 추가로 가지고 있습니다.

1. 모던 JavaScript 지원

   Axios는 ES6 프로미스 기반으로 작성되어 비동기 작업을 더 쉽게 관리할 수 있습니다.

2. 작은 번들 크기

   Axios는 jQuery보다 훨씬 가벼우며, 전체 라이브러리를 불러올 필요 없이 HTTP 요청에만 집중할 수 있습니다.

3. Node.js 지원

   Axios는 브라우저뿐만 아니라 Node.js 환경에서도 사용 가능합니다.

결론

▶ Axios는 강력하고 사용하기 쉬운 HTTP 클라이언트로, 다양한 기능을 제공하여 비동기 요청을 효율적으로 관리할 수 있게 해줍니다.
특히나 프로미스 기반의 API, 인터셉터, 취소 토큰 등의 기능을 통해 웹 애플리케이션 개발을 더욱 편리하게 만들어줄 뿐 아니라 다양한 환경에서 쉽게 사용할 수 있고 다른 HTTP 클라이언트와 비교했을 때 많은 장점을 가지고 있습니다.

이렇게 오늘은 Axios에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문이기 때문에 미리 공부해두면 좋을 것 같네요!
그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!