axios를 활용한 네트워크 요청 처리

설치 및 기본 사용법

axios는 자바스크립트 기반의 HTTP 클라이언트로, 브라우저와 Node.js 환경에서 모두 사용 가능합니다. 설치 후 간편한 API를 통해 다양한 종류의 요청을 처리할 수 있습니다.

GET 요청 예제

axios.get('/api/user', {
  params: {
    userId: 9527
  }
})
.then(response => {
  console.log('응답 데이터:', response.data);
})
.catch(error => {
  console.error('오류 발생:', error.response?.data || error.message);
});

POST 요청 예제

axios.post('/api/user/create', {
  name: '김철수',
  email: 'chulsu@example.com'
})
.then(response => {
  console.log('성공:', response.data);
})
.catch(error => {
  console.error('요청 실패:', error.message);
});

커스텀 설정을 사용한 요청

axios({
  method: 'post',
  url: '/api/submit',
  data: {
    title: '테스트 제목',
    content: '내용입니다.'
  },
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer abc123'
  },
  timeout: 5000
})
.then(response => {
  console.log('서버 응답:', response.data);
})
.catch(error => {
  if (error.code === 'ECONNABORTED') {
    console.warn('요청 시간 초과');
  } else {
    console.error('에러:', error.message);
  }
});

기본 경로로 요청하기

// GET 요청 (기본 메서드)
axios('/api/posts/1')
.then(res => console.log(res.data));

클라이언트 인스턴스 생성

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 3000,
  headers: {
    'X-API-Key': 'your-api-key-here'
  }
});

// 사용 예시
apiClient.get('/posts/1').then(res => console.log(res.data));

응답 구조 이해

각 응답은 다음과 같은 속성을 포함합니다:

  • data: 서버로부터 받은 실제 응답 본문
  • status: HTTP 상태 코드 (예: 200)
  • statusText: 상태 메시지 (예: "OK")
  • headers: 응답 헤더 정보
  • config: 요청에 사용된 설정 객체
  • request: 원래 요청 객체

인터셉터를 통한 전역 로직 관리

// 요청 전 처리
axios.interceptors.request.use(config => {
  // 로딩 표시, 토큰 추가 등
  config.headers['X-Request-Time'] = Date.now();
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 후 처리
axios.interceptors.response.use(response => {
  // 성공 응답 처리
  return response;
}, error => {
  const status = error.response?.status;

  if (status === 401) {
    // 인증 실패 시 로그아웃 처리
    localStorage.removeItem('authToken');
    window.location.href = '/login';
  } else if (status === 403) {
    alert('접근 권한이 없습니다.');
  }

  return Promise.reject(error);
});

사용자 정의 요청 클래스로 래핑

import axios from 'axios';

class ApiService {
  constructor() {
    this.client = axios.create({
      baseURL: '/api',
      timeout: 5000,
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 인터셉터 등록
    this.client.interceptors.request.use(
      config => {
        const token = localStorage.getItem('token');
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
      },
      error => Promise.reject(error)
    );

    this.client.interceptors.response.use(
      response => response.data,
      error => {
        const { response } = error;
        if (response?.status === 401) {
          localStorage.removeItem('token');
          window.location.href = '/login';
        }
        return Promise.reject(error);
      }
    );
  }

  get(url, params = {}) {
    return this.client.get(url, { params });
  }

  post(url, payload = {}) {
    return this.client.post(url, payload);
  }

  put(url, payload = {}) {
    return this.client.put(url, payload);
  }

  delete(url) {
    return this.client.delete(url);
  }
}

export default new ApiService();

태그: axios HTTP 요청 네트워크 통신 인터셉터 클라이언트 래핑

6월 6일 19:05에 게시됨

인기 태그

©2026 괴물 클럽