Vue Axios

---

🌐 Vue에서 axios란?

정의

axios는 Vue 애플리케이션에서 HTTP 요청을 보내기 위해 자주 사용하는 Promise 기반 클라이언트다.

API 호출, 응답 처리, 에러 처리, 공통 헤더 설정을 한곳에서 관리하기 좋다.

🛠️ 설치

npm install axios

🧩 axios 인스턴스 만들기

import axios from "axios";

const instance = axios.create({
  baseURL: import.meta.env.VITE_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default instance;

🔍 인터셉터

• 요청과 응답 사이에 공통 로직을 넣을 수 있다.
• 로그 출력, 토큰 첨부, 에러 처리에 자주 사용한다.

instance.interceptors.request.use(
  (config) => {
    console.log("axios request:", config);
    return config;
  },
  (error) => Promise.reject(error)
);

instance.interceptors.response.use(
  (response) => {
    console.log("axios response:", response);
    return response;
  },
  (error) => Promise.reject(error)
);

🧪 사용 예시

import axios from "@/plugins/axios";
import { useWelcomeMessageStore } from "@/stores/welcomeMessageStore";

const message = useWelcomeMessageStore();

const onClick = async () => {
  try {
    const response = await axios.get("/api/hello");
    console.log("data:", response.data);
    message.setWelcomeMessage(response.data);
  } catch (error) {
    console.log(error);
    alert("Error 데이터를 불러올 수 없습니다");
  }
};

⚠️ 주의점

• baseURL은 환경변수와 함께 관리하는 것이 좋다.
• 인스턴스를 프로젝트 전체에서 재사용하면 관리가 편하다.
• 인터셉터에 과도한 로직을 넣지 않는다.
• 에러 처리 방식을 통일해 두면 유지보수하기 좋다.

📌 정리

• Vue에서 axios는 API 호출을 위한 기본 도구처럼 많이 사용된다.
• 인스턴스와 인터셉터를 활용하면 공통 설정을 묶기 쉽다.
• Vue-환경변수와 함께 보면 설정 흐름이 더 잘 보인다.

---

연결문서

• Vue-환경변수
• npm
• Vuejs