Axios 사용하기

Axios란?

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

비동기 통신
웹 페이지를 리로드하지 않고 데이터를 불러오는 방식

Axios의 특징

• 자동으로 JSON 형식으로 변환해준다.
• Promise API를 사용하여 비동기 처리가 가능하다.
• 모든 종류의 HTTP 요청이 가능하다.
• HTTP 요청을 중단할 수 있다.

Axios 설치 명령어

npm install axios

Axios 사용하기

import axios from "axios"

① GET

데이터 조회

axios.get(url[, config])

GET 예시

❶ 콜백 함수 사용

axios.get('/api/example')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

➋ async/await 사용

async function getData() {
  try {
    const data = await axios.get('/api/example');
  } catch {
    /* error 처리 */
  }
}

② POST

데이터 추가

axios.post(url[, data[, config]])

POST 예시

❶ 콜백 함수 사용

axios.post('/api/example', {
    name: '이름',
    age: 20
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

➋ async/await 사용

async function postData() {
  try {
    const data = await axios.post('/api/example', {
      name: '이름',
      age: 20
    });
  } catch {
    /* error 처리 */
  }
}

③ PUT

데이터 수정

axios.put(url[, data[, config]])

PUT 예시

❶ 콜백 함수 사용

axios.put('/api/example', {
    name: '이름',
    age: 20
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

➋ async/await 사용

async function putData() {
  try {
    const data = await axios.put('/api/example' {
      name: '이름',
      age: 20
    });
  } catch {
    /* error 처리 */
  }
}

④ PATCH

데이터 일부 수정

axios.patch(url[, data[, config]])

PATCH 예시

❶ 콜백 함수 사용

axios.patch('/api/example', {
    age: 30
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

➋ async/await 사용

async function patchData() {
  try {
    const data = await axios.patch('/api/example' {
      age: 30
    });
  } catch {
    /* error 처리 */
  }
}

⑤ DELETE

데이터 삭제

axios.delete(url[, config])

DELETE 예시

❶ 콜백 함수 사용

axios.delete('/api/example')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

➋ async/await 사용

async function deleteData() {
  try {
    const data = await axios.delete('/api/example');
  } catch {
    /* error 처리 */
  }
}