[CS Study] fetch / axios && API란 무엇일까?

API 란???

하나의 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 방식으로 상당히 추상적인 개념이기 때문에 잘 짚고 가야하는 부분이다.

식당 메뉴판을 상상하면서 API를 이해해 보자

(김치찌개를 원하면 아줌마에게 김치찌개 달라고 해야지 김치찌개인데 참치 넣고 햄넣고 사리까지 듬뿍 넣어서 주세요 하면 안된다;;  ===)

 

작성방식

• 어떤 요청방식이 들어가야 한다 ( get, post 와 같은 것이 요청방식임)
• 어떤 자료를 요청할 지 적어야 한다 (대표적으로 URL)
• 추가정보는 넣든말든 (유저정보 기타등등 URL에서 ? 뒤에 들어가는 내용임)

웹에서만 작동하는 개념이 아니기 때문에 윈도우 데이터 관리 등등 걍 데이터를 주고받는 곳에서는 다 쓰이는 용어이기 떄문에 잘 안고가즈아...

 

---

Fetch / Axios

얘네는 뭐하는 애들인가??

promise를 기반으로 하는 HTTP 클라이언트이다 서드파티API, 서버 이런 애들이랑 연락해야 될 때 쓰는 휴대폰임 (get post 요청방식)

 

둘은 얼마나 닮았고 얼마나 다른가?

문법은 간단히 말해서 Axios가 더 짧다(상세는 참조링크 보자)

둘의 공통점으로는

• 어떤 인자를 받냐? 첫번째 인자로써 url리소스를 두번째 인자로써 요청을 설정하는 객체(선택적임 안넣어도 됨 대신 안넣으면 GET임)를 받는 것이 같다. 
• 그래서 뭘 반환하냐? promise 객체를 반환하기 때문에 reject 와 resolve 그리고 then, catch 와 finaly 의 개념은 머릿속에 있나 다시 한번 보고 와야지...
• 브라우저랑 노드환경 둘 다 실행이 가능하다.

근데 실상 axios가 좀 더 유능하기 때문에 밑에서 그 모습을 봐보자..

 

에러처리 할 때의 둘의 모습..

에러처리를 할 때 둘 다 catch를 통해서 에러를 잡아내는 모습을 볼 수 있는데 axios는 state 내에 에러가 저장이 되어있어 HTTP에러, 404에러와 네트워크 장애 여러 모습에서 다 처리를 할 수 있는 반면에 fetch는 네트워크 장애에만 반응해서 새롭게 커스텀을 해야하는 모습을 보인다... 뿐만 아니라 응답시간을 초과 했을 때에도 axios는 간단하게 timeout 속성을 설정 객체에 추가하는 모습을 보이는 반면 fetch는 AbortController라는 객체를 뭐시기하고 뭐시기해서 처리하는 모습을 보인다 

 

자동문자열 할 줄 아니?

fetch : 네?

axios : 네!

fetch 는 기본적으로 두개의 then method가 사용된다. 이유는 처음 요청을 통해서 메서드에서 처리 된 promis를 반환하고 이걸 다시 json형식으로 반환하는데 이때 명시적으로 꼭 json형식의 변환이 필요하기 때문에 2번 사용되고 axios는 json변환을 설정에다가 responseType이 있어서 여기에 json 적으면 됨... fetch는 자동문자열 안되서 JSON.stringify() 사용해서 body에 집어넣어야해...(객체를 문자열로 직렬화해주는 메서드임)

 

성능의 차이

다행히도 성능차이는 fetch가 조금 앞서는 모습이다(실상 둘 다 비동기 처리라서 속도가 크게 차이도 없고 상관도 없음;;;)

---

그래서 둘 중 뭐가 낫냐???

axios의 단점으로는 별로도 import할 필요가없는 fetch와 달리 모듈을 다운 받아야하는 점이 있다.

 

음... axios 어케 깔더라?

 

 

참고자료:

https://velog.io/@eunbinn/Axios-vs-Fetch

[번역] 입문자를 위한 Axios vs Fetch

https://curryyou.tistory.com/359 json문자열로 직렬화

https://tlsdnjs12.tistory.com/26 장단점 비