Axios

Axios란?

Axios는 JavaScript에서 주로 사용되는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경 모두에서 비동기 HTTP 요청을 보낼 수 있도록 도와줍니다. 간단히 말해, API 요청을 쉽게 처리할 수 있는 도구입니다.

---

Axios의 주요 특징

1. Promise 기반:
   • Axios는 Promise를 사용하여 비동기 작업을 처리합니다.
   • then()과 catch()를 사용하거나 async/await 구문으로 비동기 코드를 작성할 수 있습니다.
2. HTTP 요청 처리:
   • GET, POST, PUT, DELETE 등 RESTful HTTP 요청을 쉽게 작성할 수 있습니다.
3. 자동 JSON 변환:
   • 서버에서 응답받은 데이터를 자동으로 JSON 객체로 변환합니다.
4. 요청 취소:
   • 요청을 취소할 수 있는 기능을 제공합니다.
5. 요청 및 응답 인터셉터:
   • 요청이 서버로 전송되기 전 또는 응답이 처리되기 전에 특정 작업을 수행할 수 있습니다.
6. 브라우저와 Node.js 환경 지원:
   • 브라우저와 서버(Node.js)에서 모두 작동하며, 각 환경에 맞는 적절한 기능을 제공합니다.

---

Axios 설치

npm을 사용한 설치

npm install axios

CDN으로 사용

HTML 파일에서 Axios를 사용하려면 다음과 같이 추가합니다:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

---

기본 사용 예제

GET 요청

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    console.log(response.data); // 서버 응답 데이터 출력
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

POST 요청

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'New Post',
    body: 'This is a new post created using Axios.',
    userId: 1,
  })
  .then((response) => {
    console.log('Post created:', response.data);
  })
  .catch((error) => {
    console.error('Error creating post:', error);
  });

---

Axios와 Async/Await

async/await을 사용하면 비동기 요청 코드를 더 간결하게 작성할 수 있습니다.

const fetchPosts = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching posts:', error);
  }
};

fetchPosts();

---

Axios 요청 메서드

메서드	설명
axios.get(url[, config])	데이터를 조회 (GET 요청).
axios.post(url, data[, config])	데이터를 생성 (POST 요청).
axios.put(url, data[, config])	데이터를 수정 (전체 업데이트).
axios.patch(url, data[, config])	데이터를 수정 (부분 업데이트).
axios.delete(url[, config])	데이터를 삭제 (DELETE 요청).

---

요청 및 응답 인터셉터

Axios는 요청이나 응답 전에 특정 작업을 수행할 수 있는 인터셉터(interceptor)를 제공합니다.

요청 인터셉터

axios.interceptors.request.use(
  (config) => {
    console.log('Request Sent:', config);
    return config; // 요청을 계속 진행
  },
  (error) => {
    return Promise.reject(error); // 에러 처리
  }
);

응답 인터셉터

axios.interceptors.response.use(
  (response) => {
    console.log('Response Received:', response);
    return response; // 응답 데이터 반환
  },
  (error) => {
    return Promise.reject(error); // 에러 처리
  }
);

---

Axios의 추가 기능

요청 취소

요청을 취소하려면 AbortController를 사용합니다:

const controller = new AbortController();

axios.get('https://jsonplaceholder.typicode.com/posts', {
  signal: controller.signal,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.error('Request canceled:', error.message);
  } else {
    console.error('Error:', error);
  }
});

// 요청 취소
controller.abort();

기본 설정

반복적으로 사용되는 설정을 미리 지정할 수 있습니다.

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: { 'Authorization': 'Bearer YOUR_TOKEN' },
});

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

---

Axios vs Fetch API

특징	Axios	Fetch API
Promise 기반	사용 가능	사용 가능
JSON 자동 변환	자동 변환	수동으로 변환 필요 (response.json())
요청 취소	기본 제공 (AbortController 필요 없음)	AbortController 사용 필요
인터셉터	기본 제공	직접 구현 필요
브라우저 지원	오래된 브라우저에서도 사용 가능	최신 브라우저에서만 지원

---

Axios 사용 시 주의사항

1. 에러 처리:
   • 네트워크 오류 또는 HTTP 상태 코드(404, 500 등)를 적절히 처리해야 합니다.
2. 보안:
   • 민감한 데이터를 전송할 때는 항상 HTTPS를 사용하세요.
3. 요청 최적화:
   • 요청을 반복적으로 보내지 않도록 캐싱 전략을 고려하세요.

---

Axios는 React, Vue.js, Node.js와 같은 다양한 JavaScript 환경에서 API 요청을 쉽게 처리할 수 있도록 도와주는 강력한 HTTP 클라이언트입니다.