[TIL] Axios

0. 주제 선정하게 된 배경 :

어제 공부했던 react query에서 서버에다가 데이터 요청할땐 fetch나 axios 아무거나 사용해도 된다고 했었다.
fetch랑 axios는 API를 공부했을때 API를 호출하는 방법들이였다.
fetch는 공부했었고, axios도 공부해보고자 한다.

1. 제대로 알고 넘어가기 :

1-1. Axios란?

: 쉽게말하면 비동기 처리를 위한 자바스크립트 라이브러리
주로 웹 어플리케이션에서 API 호출(대부분 비동기 함수로 호출)할 때 사용되는 "HTTP 클라이언트 라이브러리"

HTTP 클라이언트 라이브러리
: 웹 애플리케이션에서 HTTP 요청을 보내고 응답을 받는데 사용되는 라이브러리

HTTP
: 인터넷 상에서 데이터를 주고 받는 표준 프로토콜
ㄴ 구성 : 요청 메소드(GET,POST,PUT,DELETE), 응답 상태 코드, 헤더, 본문(body)
ㄴ 사용 : 주로 HTML 문서, 이미지, CSS 파일, JavaScript 파일 등을 전송하는 데 사용

프로토콜
: 네트워크에서 통신을 위한 규약이나 규칙

1-2. 설치

npm install axios

1-3. 사용

import axios from 'axios';
// 가장 많이 쓰이는 방식
axios.get('https://api.example.com/data')
  .then(response => {
    // 성공적인 응답 처리
    console.log(response.data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Error fetching data:', error);
  });
  
// 비동기적으로 사용할 경우
async function example() {
	try{
    	const response = await axios.get('URL');
    } catch (error) {
    	console.error(error);
    }
}

: axios를 사용할땐 추가적인 JSON 파싱 과정이 필요하지 않음!

1-4. fetch vs axios

1. GET 요청시 응답받은 프로미스 객체를

• fetch : json으로 파싱해줘야 함
• axios: 자동으로 json으로 파싱된 데이터를 보내줌

2. POST 요청시 데이터 형식을

• fetch : 헤더에 content-type: 'application/json'로 지정해서 전달해야 함
• axios: 해당 내용을 자동으로 추가해주므로 지정해주지 않아도 됨

3. 에러 처리 : axios는 HTTP 상태 실패 코드를 에러 처리해주지만, fetch는 그러지 못하므로 따로 처리해서 throw해줘야 함

• fetch : 네트워크 장애만 에러 처리(catch 블록으로 이동) -> 따라서 수동으로 HTTP 에러를 처리해줘야 함 (HTTP 상태 코드가 200번대가 아닌 경우(실패 상태 코드)는 response.ok로 확인할때 false를 반환함 )
• axios : 네트워크 장애 + HTTP 상태 실패 코드 (400번대, 500번대)를 에러 처리 (catch 블록으로 이동) -> 따라서 자동으로 HTTP 에러를 처리해줌

fetch 예시 )

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { // -------------------------------- > 수동으로 HTTP 에러를 처리 : 400번대, 500번대는 false를 반환
      throw new Error('네트워크 오류 또는 서버 오류가 발생했습니다.');
    }
    return response.json();
  })
  .then(data => {
    console.log('응답 데이터:', data);
  })
  .catch(error => {
    console.error('오류 발생:', error);
  });

axios 예시 )

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('오류 발생:', error);
  });

2. 챗지피티를 활용하여 대화식으로 학습한 내용 :

axios: https://chat.openai.com/share/fb37120a-6fad-42b8-a277-517256ec1440
fetch vs axios :https://chat.openai.com/share/c5223aee-41e8-4858-838b-53ff25a5d820