💙 Ajax
자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 포로그래밍 방식
Web API XMLHttpRequest(HTTP 비동기 통신을 위한 메서드와 포러피트를 제공) 객체를 기반으로 동작한다
⭐️ Ajax의 장점
- 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 동신이 발생하지 않음
- 변경할 필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜박이는 현상이 발생하지 않음
- 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않음.
💙 Fetch
XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 다. fetch 함수는 XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다.
fetch 함수에는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.
fetch('url')
.then(res => console.log(res))
.catch(() => console.log('error'))then을 통해 프로미스가 resolve한 res 객체를 전달 받을 수 있다.
fetch 함수가 반환하는 프로미스는 기본적으로 404 나 500와 같은 Http 에러가 발생해도 에러를 reject 하지 않고 resolve한다.
오프라인 등의 네트워크 장애나 CORS 에러에 의해 요청이 완료되지 못한 경우에만 프로미스를 reject 한다
반면에
axios는 모든 HTTP 에러를 reject하는 프로미스를 반환한다
따라서 모든 에러를 catch에서 처리 할수 있어서 편리하다. 또한 axios는 인터셉터 요청 설정 등 fetch보다 다양한 기능을 지원한다.
참고
모던자바스크립트 책
블로그 : https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API
