[CS] Axios 사용법 정리 - 설치부터 인터셉터까지

자바스크립트 HTTP 클라이언트 axios의 기본 사용법을 GET/POST부터 인스턴스, 인터셉터까지 예시와 함께 정리했습니다.

---

 

axios란

브라우저와 Node.js 양쪽에서 쓸 수 있는 HTTP 클라이언트 라이브러리입니다. Promise 기반이라 .then()이나 async/await로 자연스럽게 다룰 수 있고, JSON 자동 파싱·에러 처리·인터셉터 같은 편의 기능이 내장되어 있어서 실무에서 많이 씁니다.

 

설치

 

bash

npm install axios

 

javascript

import axios from "axios";

 

기본 사용법: GET, POST, PUT, DELETE

 

javascript

// GET - 데이터 조회
const res = await axios.get("/api/users");
console.log(res.data); // 이미 JSON으로 파싱된 상태

// POST - 데이터 생성
await axios.post("/api/users", {
    name: "하늘",
    age: 30
});

// PUT - 데이터 수정
await axios.put("/api/users/1", {
    name: "하늘",
    age: 31
});

// DELETE - 데이터 삭제
await axios.delete("/api/users/1");

GET을 제외한 나머지는 두 번째 인자에 요청 본문(body)을 그대로 객체로 넘기면 됩니다. 응답 결과는 항상 res.data에 담겨 옵니다.

 

쿼리 파라미터, 헤더 넣기

 

javascript

axios.get("/api/users", {
    params: { page: 1, size: 10 }, // ?page=1&size=10 으로 붙음
    headers: { Authorization: `Bearer ${token}` }
});

에러 처리

 

javascript

try {
    const res = await axios.get("/api/users/999");
} catch (error) {
    if (error.response) {
        // 서버가 응답은 했지만 실패 상태코드(4xx, 5xx)
        console.log(error.response.status, error.response.data);
    } else if (error.request) {
        // 요청은 보냈지만 응답이 아예 없음(네트워크 문제 등)
        console.log("응답 없음");
    } else {
        // 요청 자체를 만드는 과정에서 에러
        console.log(error.message);
    }
}

axios는 4xx, 5xx 상태 코드를 자동으로 에러로 처리해서 catch로 보내주기 때문에, 매번 상태 코드를 직접 확인할 필요가 없습니다.

인스턴스로 공통 설정 묶기

여러 API를 호출할 때마다 baseURL이나 헤더를 반복해서 쓰지 않도록, 인스턴스를 만들어 재사용합니다.

 

javascript

const api = axios.create({
    baseURL: "https://api.example.com",
    timeout: 5000,
    headers: { "Content-Type": "application/json" }
});

api.get("/users"); // 실제로는 https://api.example.com/users 로 요청

인터셉터: 요청/응답 가로채기

 

javascript

// 모든 요청 전에 토큰을 자동으로 붙임
api.interceptors.request.use(config => {
    const token = localStorage.getItem("token");
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
});

// 모든 응답에서 401이면 로그인 페이지로 이동
api.interceptors.response.use(
    response => response,
    error => {
        if (error.response?.status === 401) {
            window.location.href = "/login";
        }
        return Promise.reject(error);
    }
);

인터셉터를 걸어두면 "토큰 붙이기", "401이면 로그아웃 처리" 같은 공통 로직을 매 요청마다 반복하지 않고 한 곳에서 관리할 수 있습니다.

 

마무리

axios는 결국 "GET/POST 같은 기본 요청을 짧게 쓰고, 공통 설정(인스턴스)과 공통 처리(인터셉터)를 한 곳에 모아두는" 도구입니다. 프로젝트 초반에 axios.create()로 인스턴스 하나 만들어두고, 토큰 붙이기·에러 공통 처리를 인터셉터에 미리 걸어두면 이후 API 호출 코드가 훨씬 간결해집니다.