들어가며
처음에 비동기 통신을 공부할 때, axios, fetch, ajax를 배우며
대체 뭐가 뭔지 모르겠고 뭘 써야할지 헷갈렸던 경험이 있다.
최근 fetch를 공부하며 어렴풋이 알고 있던 부분을 정리해봤다.
요약하자면...
Ajax는 과거 비동기 통신 방식이며 지금은 거의 사용하지 않음!
Axois는 비동기 통신할 수 있는 라이브러리라서 설치해야 사용 가능!
fetch는 최근 javascript에 생긴 메서드라서 가장 편하고 좋지만 단점도 존재!
🍀 Ajax / Axois / Fetch
Ajax -> Axios -> Fetch
오래된 순서이며, 이전 방식의 문제를 해결하기 위해 다음 방식이 생겨남
Ajax
과거 브라우저에서 화면을 갱신하지 않고 서버로부터 데이터를 받아오기 위해 사용하던 프로그래밍 방식
브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신함
- 기본 메소드(XMLHttpRequest 등)을 사용한 구현이 어려워서 라이브러리 JQuery를 주로 사용했음
- Promise 기반이 아님
Axios
Promise 기반의 HTTP 통신 라이브러리
- Ajax 방식보다 비동기로 데이터를 다루기 편리해짐
Fetch
ES6에 도입된 자바스크립트 내장 함수로, 클라이언트가 서버에 네트워크 요청을 보내서 정보를 받아올 때 사용함
- Promise 기반이라 비동기로 응답 받은 데이터를 다루기 쉬움
- 내장 함수라서 모듈 설치할 필요가 없음
🍀Axios vs Fetch 뭘 써야할까?
| Axios | Fetch | |
|---|---|---|
| 브라우저 호환성 | 좋음 |
안좋음 지원되지 않는 브라우저 있음 |
| response timeout 처리 방법 | 있음 |
없음 네트워크 에러 발생시 대기시간 설정 불가 |
| 응답 데이터 JSON 변환 | 불필요 |
필요 자동으로 변환 안 됨 |
| 모듈 설치 | 필요 |
불필요 내장 함수라서 import 필요 없음 |