Axios로 API 통신 구현하기

api 호출

Axios로 API 통신을 구현하려면 먼저 프로젝트에 Axios를 설치하고, axios.get(), axios.post() 등의 메서드를 사용하여 서버와 HTTP 요청/응답을 주고받습니다.

이는 프론트엔드(Vue, React 등)와 백엔드 서버 간 데이터 교환을 위해 필수적이며, Promise 기반으로 비동기 처리를 간편하게 할 수 있어 fetch API보다 많이 사용됩니다.

요청 성공 시 .then()으로 데이터를 처리하고, 실패 시 .catch()로 오류를 관리하며, JSON 데이터 처리가 용이합니다. 

1. Axios 설치

• npm 사용 시: npm install axios
• yarn 사용 시: yarn add axios 

2. 기본 사용법 (GET 요청)

import axios from 'axios';

// GET 요청 보내기
axios.get('https://api.example.com/data')
  .then(response => {
    // 요청이 성공하면 여기서 응답 데이터를 처리합니다.
    console.log(response.data); // 응답 데이터
  })
  .catch(error => {
    // 요청이 실패하면 여기서 오류를 처리합니다.
    console.error('API 호출 실패:', error);
  });

 

공식 문서

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

---

관련 글

https://rxxm.tistory.com/152

[Vue.js] Axios로 API 통신 구현하기

(위 글 중에는 vue 부분 빼고 나머지 js 핵심 로직을 보면 된다.)

---

관련 유튜브 영상

https://youtu.be/d6suykcsNeY?si=KE55KxlbNXNSbBbj