Ajax,axios,fetch의 차이

Ajax(Asynchronous JavaScript and XML)란?

비동기 통신 방법이며 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나이다. XMLHttpRequest 객체를 이용하여 웹 페이지 전체를 다시 로딩하지 않고 일부분만 갱신할 수 있다. Ajax는 백그라운드 영역에서 서버와 통신하며 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

• 비동기 방식이란?

  사용자가 서버로 요청을 보냈을 때 요청에 대한 응답을 기다리지 않고 다른 것을 수행 할 수 있고, 서버로 다른 요청을 보낼 수 있어 자원을 효율적으로 사용할 수 있는 통신 방법을 말한다.

Ajax의 장점

• 비동기 방식으로 서버의 처리가 완료 될 때 까지 기다리지 않아도 처리가 가능하다.
• 웹페이지의 속도가 향상된다.
• XMLHttpRequest 객체를 통해서 서버에 요청하기 때문에 Http 페이지전체가 아닌 일부분만 갱신할 수 있고 Json이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 시간이 절약되고 자원을 효율적으로 사용할 수 있다.
• 기존 웹에서 불가능했던 다양한 UI를 가능하게 해준다

Ajax의 단점

• 연속적으로 데이터를 요청 시 서버 부하가 증가할 수 있다.
• 페이지가 이동하지 않는 통신이므로 보안에 취약하다.
• 히스토리 관리가 되지 않는다.
• 사용자의 요청이 완료되지 않았는데 페이지를 떠나거나 오작동할 가능성이 있다.

Axios란?

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다

• Promise란?

  -- JavaScript에서 제공하는 API로 비동기 처리에 사용되는 객체이다.
  서버에서 받아온 데이터를 화면에 표시할 때 사용하며 비동기 처리에서 발생 할 수 있는 오작동을 해결하여 코드의 실행 흐름에서 비동기처리를 유연하게 하도록 도와준다.

Axios의 장점

• 브라우저 호환성이 뛰어나다.

• promise 기반으로 다루기가 쉽다.

• response timeout 처리 방법이 있다.

  -- timeout이란?
  응답을 무한정 기다릴 수 없기 때문에 기다릴 시간을 정해 자동적으로 중단 되는 것을 말한다.
  

Axios의 단점

• 사용을 위한 모듈 설치가 필요하다.
  npm install axios 설치 필요

fetch란?

JavaScript 내장 라이브러리로 서버에서 데이터를 가져오기 위해 사용된다. axios와 마찬가지로 Promise 기반으로 만들어져 데이터 처리가 비교적 쉽다.

fetch의 장점

• JavaScript 내장 라이브러리이기 때문에 따로 설치가 필요하지는 않다.
• Promise 기반으로 만들어져 데이터를 다루기 편리하다.
• JavaScript의 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.

  fetch의 단점

• 네트워크 에러 발생 시 response timeout 처리 방법이 없어 대기해야 된다.
• 지원하지 않는 브라우저가 존재한다.(IE)
• 요청 취소가 되지 않는다.

  Ajax,axios,fetch의 차이

  Ajax	Axios	Fetch
  요청객체에 url 존재	요청객체에 url 존재	요청객체에 url 미존재
  요청 취소가 가능하다.	요청 취소가 가능하다.	요청 취소가 불가능하다.
  timeout 설정방법이 존재한다.	timeout 설정방법이 존재한다.	timeout 설정방법이 없다.

🙇‍ 참고 사이트 🙇‍

http://www.tcpschool.com/ajax/ajax_intro_basic
https://cocoon1787.tistory.com/756
https://devscb.tistory.com/66