[React] Axios 를 이용한 Api 호출

Axios를 이용한 프론트엔드 서버와 백엔드서버 사이의 통신

Introduction

서버와 데이터를 주고받기 위해 Api통신을 사용하는 방법에 대해 알아봅니다. fetch라는 기본적인 api호출 방식이 있지만, Axios 라이브러리를 통한 api 호출을 하려고 합니다.

그렇다면, 왜 Axios를 사용할까??

1. json 형식의 데이터 처리
   서버 응답을 자동으로 json으로 변환해줍니다.
   fetch를 사용하면 .json() 메서드를 호출해야 하고, 이 과정에서 에러 처리가 필요합니다.
2. 프로미스 기반의 비동기 작업 처리
3. intercepter를 통한 요청 전, 후 관여
   요청과 응답을 가로채어 처리할 수 있는 인터셉터 기능이 있습니다.
   이를 통해 공통된 작업처리, 요청과 응답의 전,후처리를 할 수 있습니다.
   이에 비해, fetch에서는 요청 전, 후에 직접적으로 로직을 수동추가 해야합니다.
4. config를 통한 요청 정보 관리
   요청 옵션을 fetch 메서드의 두번째 인자로 전달합니다.
   axios는 config객체를 통해 다양한 옵션과 전역적인 기본 설정을 지정할 수 있습니다.
5. timeout을 통한 서버와의 통신 시간 관리
   fetch는 타임아웃을 지원하지 않습니다. AbortController를 사용하여 수동으로취소해야 합니다.
6. 오류 처리
   fetch는 HTTP 상태 코드가 오류임에도 에러를 발생시키지 않습니다.
   axios는 상태 코드가 오류이면 자동으로 에러를 발생시킵니다.
   이를 catch로 처리할 수 있으며, 오류에 대한 자세한 정보를 받을 수 있습니다.
7. 요청 취소

Axios 사용법

우선, axios 라이브러리를 설치합니다.

npm install axios 
# 혹은
yarn add axios

1. 기본적인 GET 요청

import axios from 'axios';

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

2. 기본적인 POST 요청

import axios from 'axios';

axios.post('https://sample.example.com/', {
  title: 'learn axios',
  body: 'http request',
  userId: 1
})
  .then(response => {
  console.log('Data:', response.data);
})
  .catch(error => {
  console.error('Error:', error);
});

3. 요청에 헤더 추가하기

헤더에 추가하여 서버에 필요한 정보를 전송할 수 있습니다.

import axios from 'axios';

axios.get('https://sample.example.com/', {
  headers: {
    'Authorization': 'Bearer TOKEN'
  }
})
  .then(response => {
  console.log('Data:', response.data);
})
  .catch(error => {
  console.error('Error:', error);
});