Axios의 다양한 기능

Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 환경에서 모두 사용할 수 있고, 다양한 기능을 제공하여 HTTP 요청을 쉽게 관리하고 처리할 수 있게 해준다.

 

 

Axios의 주요 기능

 

/ Promise 기반

Axios는 Promise를 기반으로 동작하므로 비동기 작업을 쉽게 처리할 수 있다.

/ 요청 및 응답 변환

요청 데이터를 자동으로 JSON 문자열로 변환하고, 응답 데이터를 JSON 객체로 변환한다.

 

/ 요청 취소

요청을 취소할 수 있는 기능을 제공

/ 자동 변환

JSON 데이터를 자동으로 변환

/ 타임아웃 설정

요청의 타임아웃을 설정할 수 있다.

/ 인터셉터

요청 또는 응답을 가로채고, 그 사이에 추가 로직을 삽입할 수 있다.

/ 헤더 설정

요청에 대한 커스텀 헤더를 쉽게 설정할 수 있다.

/ Node.js 지원

서버 사이드에서 HTTP 요청을 보낼 수 있다.

/ XSRF 보호

XSRF(크로스 사이트 요청 위조) 보호 기능을 제공한다.

 

 

 

| 설치

npm install axios

 

 

| GET 요청

import axios from 'axios';

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', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

 

 

| 요청 인터셉터

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);
});

 

 

| 요청 취소

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 요청 취소
cancel();

 

 

| 요청 타임아웃

axios.get('https://api.example.com/data', {
  timeout: 5000  // 5초
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  });

 

 

| 헤더 설정

헤더는 서버에 요청의 성격, 형식, 인증 정보 등을 전달하는 중요한 정보를 포함한다.

 

 

< 헤더를 명시하는 경우>

 

- 인증 및 권한 부여

JWT 토큰, API 키 등을 헤더에 포함하여 인증된 요청을 보낼 수 있다.

axios.get('https://api.example.com/protected', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

 

 

- 콘텐츠 타입(Content-Type)

서버가 요청 본문의 데이터를 파싱할 수 있도록 데이터 형식을 명시할 수 있다.

axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

 

 

- 커스텀 헤더(Custom Headers):
특정 애플리케이션 요구 사항에 맞는 사용자 정의 헤더를 추가할 수 있다.

axios.get('https://api.example.com/data', {
  headers: {
    'X-Custom-Header': 'customValue'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

 

 

< 헤더를 명시하지 않는 경우>

 

- 기본 헤더 사용
요청은 기본적인 HTTP 헤더만 포함한다. (예: GET 요청의 경우에는 기본적으로 헤더가 필요하지 않음)

 

 

- 단순 요청(Simple Requests)
서버가 특별한 헤더 없이도 요청을 이해하고 처리할 수 있는 경우에는 별도로 헤더를 명시할 필요가 없다.

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