Axios

Axios는 브라우저와 Node.js에서 모두 동작하는 Promise 기반의 HTTP 클라이언트 라이브러리이다. 주로 웹 애플리케이션에서 서버와 데이터를 주고받기 위해 사용되며, Vue.js, React 등과 같은 프론트엔드 프레임워크와 함께 많이 사용됨. Ajax 요청을 더욱 간편하게 처리할 수 있도록 도와주며, 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 지원함.

주요 기능

• Promise 기반으로 비동기 작업 처리
• 브라우저와 Node.js에서 사용 가능
• 요청 및 응답 인터셉터 지원
• 자동 JSON 데이터 변환 (요청 본문 또는 응답 본문)
• CORS 지원
• HTTP 요청 취소 기능
• 타임아웃 설정 가능

기본 사용법

import axios from 'axios';

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

// POST 요청
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

HTTP 메서드

// GET
axios.get('/api/user', { params: { id: 123 } })
  .then(response => console.log(response));

// POST
axios.post('/api/user', { name: 'John', age: 30 })
  .then(response => console.log(response));

// PUT
axios.put('/api/user/123', { name: 'John Updated' })
  .then(response => console.log(response));

// DELETE
axios.delete('/api/user/123')
  .then(response => console.log(response));

요청 및 응답 인터셉터

인터셉터를 사용하면 요청 또는 응답 전에 특정 작업을 수행할 수 있다. 예를 들어, 모든 요청에 공통 헤더를 추가하거나, 특정 조건에 따라 에러 처리를 할 수 있음.

// 요청 인터셉터
axios.interceptors.request.use(
  config => {
    // 요청 전에 실행할 코드 (ex: 공통 헤더 추가)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

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

기본 설정 (Global Configuration)

Axios는 기본 설정을 이용해 요청의 기본값을 설정할 수 있음. 예를 들어, 기본 baseURL, timeout 등을 설정할 수 있음.

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000; // 타임아웃 10초
axios.defaults.headers.common['Authorization'] = 'Bearer token';

비동기 처리

Axios는 Promise 기반이기 때문에 비동기 처리를 위한 async/await를 사용할 수 있음.

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

fetchData();

Axios와 Vue.js

Vue.js에서 Axios는 API 통신을 쉽게 처리하기 위해 많이 사용됨. methods나 mounted 라이프사이클 훅에서 서버와의 데이터 통신에 활용할 수 있다.

<template>
  <div>
    <h1>{{ todo.title }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      todo: {}
    };
  },
  mounted() {
    this.fetchTodo();
  },
  methods: {
    async fetchTodo() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
        this.todo = response.data;
      } catch (error) {
        console.error('Error:', error);
      }
    }
  }
};
</script>

결론

• Axios는 간편하게 API 요청을 할 수 있게 도와주는 강력한 HTTP 클라이언트 라이브러리임.
• 비동기 작업을 쉽게 처리할 수 있으며, Promise와 async/await를 지원함.
• Vue.js와 같은 프론트엔드 프레임워크에서 서버와의 통신을 위해 많이 사용됨.