Axios, Fetch, Promise.... 응애

김재즈·2023년 12월 4일

이 글은 이렇게 제작되었습니다.

API 데이터를 받아오면서
항상 샷건을 치게 만들었던..
날 화나게 했던 이 친구들을

오늘 개념부터 잡고 가볼까 한다.

이해 안되는 놈들은 날 잡고 패야죠.

솔직히 이번 음악 추천 사이트 프로젝트를 만들면서도
API를 받아올 때가 제일 막막했다.

예전에 만들었던 코드 이해도 못한 상태로 가져와서 사용하고,,

구글링 + ctrl+C + ctrl+V
응애 Chat gpt

이게 이번 제 망가진 코딩상태였다.

진짜 이번기회에 쳐 죽이고 다시 가보자.

어려운 키워드

우선 API 받아올 때 이해하지 못했던 코드들, 키워드 들을 정리해보자.

AJAX
fetch
then
axios
promise
await
async

const json = await (await fetch(URL)).json();

이정도 있는 것 같네요.
한번 족쳐볼까요.

AJAX

JS 라이브러리네요.
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자.

비동기 식으로 진행해서 데이터를 로드하는 기법이다.

이게 얼마나 혁신적인거냐면.

자. 당신이 인스타그램에 들어갔어
근데 거기 게시물이랑 스토리랑 뭐 메세지랑 많겠지?

어라. 그 데이터 전부를 받아와서 로딩할 때 까지 인스타그램 페이지가 먹통이네
로딩이 다 되어야 겨우 볼 수 있는거임.

얼마나 불편한가.

근데, 로딩이 필요한 데이터가 있으면
일단 기본페이지에서 시작해서
로딩된 데이터부터 챡챡 대령하는거임.

이러면 데이터가 전부 로딩될 때 까지 폰에 비친 내 모습을 보며 경악을 할 필요가 없다 이말이다.

와~ 비동기 보소?

이렇게 서버와 클라이언트 간의 XML 데이터를 비동기 형식으로 주고받는 것.
이것이 바로 AJAX이다.

이후 후술할 fetch와 axios는 이 AJAX를 가능하게 해주는 도구이다.

fetch

위에서 언급한 AJAX를 가능하게 해주는
비동기 요청을 하는 방식.

서버에서 데이터를 가져오기 위해 사용하죠.

방식

네트워크 요청을 보내고, 서버로부터 응답을 받는다.
응답은 Promise 객체로 반환되어요

쓰다보니까 Promise를 먼저 공부해야 할것 같은데,

여기서 바로 알아보도록 하자.

Promise

데이터를 모두 받기 전에 웹에 출력하려는 경우를 방지하기 위해 사용한다.

쉽게 알아보자.

특정 데이터를 받아와야 받아올 수 있는 데이터가 있다고 생각해보자.

비동기로 데이터를 받아오다 보면,
데이터들이 다 안받아졌는데 막 ~~착착챡~~ 가져오는거임.
그럼 막 꼬여서 에러 발생한다 이말이야 ~

데이터를 전부다 받기 전에 페이지에 출력하면 에러가 발생하겠지

그걸 방지하기 위해서 사용하는거에오.
그래서 비동기 과정 속에서 동기 과정을 삭 집어넣어 주는거임.

비동기 로직 속에서, 동기 로직을 사용한다는 느낌으로 가면 되는거다.

사용법

Promise의 상태에는

대기 : 처리 미완료
이행 : 처리 완료 -> resolve 함수 호출
실패 : 처리 실패 또는 오류 -> reject 함수 호출

가 있음.

new Promise(function(resolve, reject) {
  $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
});

이런 식으로 Promise 객체를 생성해주고

성공했다면?
resolve 안에 처리 값을 넣어주면 되는거임.
실패했다면?
reject 안에 에러 메세지 및 뭐시깽이를 넣어주면 되는거임.

완벽하게 이해 완료.

다시 fetch로 돌아가보자.
먼 길을 돌아온 기분이다.
하지만 숏컷 뚫었죠? fetch, axios 아무것도 못하죠?

! 이제 Fetch를 쉽게 설명해보겠음.

당신이 원하는 API가 있을거 아냐.
예를 들어서 뭐 ~~전세계 마약 데이터~~ API라던가
~~죠죠 피규어 판매 위치~~ 데이터 API 같은거.

그런 API사이트에는 이미 백엔드 처리가 되어있단 말이야~
그래서 우리가 데이터 주세요 하고 요청을 하면

해당 주소에서 요청을 받아서 퉤 하고 원하는 데이터를 주는거죠.

여기서 요청할 때 우리가 사용하는 것이 바로 Fetch란 말이지.

axios도 똑같은 구조이긴 할텐데 아마 기능이 다를거임.
그건 좀있다 알아보자구요.

사용법

기본 구조

fetch(url)
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

아 쉽죠?
이제 이해하고 나서 보니까 그냥 뭣도 아니었네 ㅋㅋ~
.then이랑 res는 바로 알아봅시다.

then

then은 함수 실행이 끝났을 때, 다음 할 일을 정해주는 것이에오

if가 (만약~) 이면
then은 (그러면~)이라고 이해하면 될듯.

then이 fetch(url)뒤에 붙으면
그거 주소 받아왔어? 그러면 내 뒤에 이것좀 하자

이렇게 이해하면 될것 같다.

res

res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체라고 한다.

response 줄임말이었네요.
그냥 받아온 데이터를 res라고 지칭하는듯.

~~보통 res라고 쓰는것 같은데 걍 맘데로 poop으로 사용해도 되는거 아님?~~

axios

이것은 JS의 통신 라이브러리이다.
HTTP 통신을 위해서 만들어진 최강병기 인듯 하다.

쉽게 생각하자면 원하는 URL의 데이터를 가져오기 위한 무기 이다. (~~맞겠죠??~~)

근데 Fetch랑 다를게 뭐냐?

자세하게는 잘 모르겠는데

아무튼 지원하고 제공하는 기능이 fetch보다 많은듯.
또 axios 지원하는 브라우저가 굉장히 많다.
json을 자동적용해서 res 객체를 바로 반환해준다.
fetch(url).json 이거 해줄 필요가 없다는 말인듯.

그래서 fetch랑 axios 둘은 비슷하지만?
axios가 유전자 몰빵 받았다~

앞으로는 axios만 쓸듯요 ㅋㅋ
아 좋다는데 써야죠.

async & await

마지막이네요. 이제 좀 지친다.

이게 좀 찾아보니까 Promise 상위호환 느낌이다.

사용법

매우 간단하다네요;

함수 앞에 async를 붙이면 해당 함수는 자동으로 Promise 반환.
await를 붙이면 해당 promise가 끝날때까지 기다림(동기적 처리)
await는 async 붙은 함수에서만 사용 가능.

그니까. 함수앞에 async를 붙이면 promise 객체 선언할 필요가 없다 이말임.
그리고 await를 이용해서 동기적 처리까지 가능하네요.

개사기.

코드한번 봅시다.

const getData = **async** () => {
    const json = **await** fetch(
      `https://kitsu.io/api/edge/anime/${id}`
    ).json();
    console.log(json)
}

이렇게~
그냥 알아버렸다.