Axios 사용법

Fetch와 Axios 차이점

fetch는 Promise 기반으로 만들어졌으며, 내장 라이브러리이기 때문에 별도의 import가 필요없기에 편리하다.

그러나 많은 사람들이 axios를 사용하는 것을 더 선호한다. 그 이유는 다음과 같다.

fetch는 네트워킹에 오류가 있는 상황에서만 Promise를 reject 시키기 때문에 모든 fetch 호출에 오류를 처리하는 함수를 작성해야 한다. axios는 모든 HTTP 에러를 reject하는 Promise를 반환하기에, 모든 에러를 catch에서 처리할 수 있어서 편리하다. 또한, 인터셉터, 요청 설정 등 fetch보다 다양한 기능을 지원한다.

 

Axios 사용 방법

- axios 설치

$ npm install axios

- HTTP 요청 전송

import axios from 'axios';

const promise = axios({
  method: 'GET', // 요청 메서드 (GET, POST, PUT 등)
  url: 'https://api.example.com/data', // 요청 URL
  params: { id: 1 }, // URL 쿼리 파라미터
  headers: { 'Content-Type': 'application/json' }, // 요청 헤더
  data: { name: 'John', age: 25 }, // 요청 바디 데이터 (POST 요청 시)
});

- GET 요청

import axios from 'axios';

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

 

- POST 요청

import axios from 'axios';

axios.post('https://api.example.com/data', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

 

await 사용

await는 async 함수 내에서 사용되며, 비동기 작업의 완료를 기다리기 위해서 사용된다.

Axios를 사용할 때 await를 사용하는데, 그 이유는 다음과 같다.

 

1. 비동기 작업 완료 대기
   Axios 요청 앞에 await를 붙이면 비동기 작업의 완료를 기다릴 수 있다.
   이렇게 하면 다음 줄의 코드 실행이 멈추고, 해당 비동기 작업이 완료될 때까지 기다린다.
2. 응답 데이터 추출
   Axios는 Promise 객체를 반환해주는데, await를 사용하면 Promise가 처리되고 결과 데이터를 추출할 수 있다.