[JS]ajax/axios/fetch

🔎 ajax

ajax는 Asyncronous Javascript And XML의 약자로 말 그대로 자바스크립트를 이용한 비동기 통신 방법을 의미한다. 여기서 이름에는 XML이 들어가있기는 하지만, XML은 필수는 아니고 최근에는 JSON을 더 많이 사용한다.

❓ ajax가 사용된 이유

전통적인 정적 페이지 방식의 경우 처음 페이지를 요청할 때 서버에서 해당하는 페이지를 반환을 하고난 뒤, 페이지의 일부 정보만 갱신하는 것은 불가능했다. 그래서 뭔가 조금이라도 화면을 바꾸고 싶다면 다시 페이지를 요청하여 전체 페이지를 불러와야만 했다.

그런데 ajax를 사용하면 자신이 원하는 페이지의 일부만 서버에 데이터를 요청하여 갱신을 할 수 있게 되었다 이로 인해 서버와 통신하는 데이터도 줄어들고, 새로 페이지를 불러오는 과정에서 페이지가 깜빡이는 현상도 없앨 수 있게 되었다.

◼ XMLHttpRequest 객체

ajax는 통신을 할 때 XMLHttpRequest라는 객체를 이용한다. XMLHttpRequest, 줄여서 xhr 객체는 Microsoft에서 만든 ActiveX 객체인 XMLHttp에서 시작되었다고 한다.(현재는 미사용. 구형 IE에서 사용됨)

xhr은 자바스크립트에서 보통 많이 사용되고, 최신 프레임워크에서는 잘 사용하지 않는 듯 하다.

◼ xhr 객체를 이용한 통신 방법

1. xhr 객체 생성

const httpRequest = new XMLHttpRequest();

2. 서버에 요청을 보내고 응답이 온 이후 실행할 함수를 xhr 객체에 연결한다. onreadystatechange라는 속성이고 연결할 함수는 단순 함수 호출이기 때문에 별도 파라미터가 없다.

1. httpRequest.onreadystatechange = function (){...}
2. httpRequest.onreadystatechange = function_name;

3. open(), send()를 사용하여 통신할 서버 주소를 지정하고 xhr 객체를 보낸다.
   • open() : Request Method(GET, POST, HEAD), URL, 이 요청이 비동기로 동작하는지 를 기입한다. Request Method의 경우 반드시 전부 대문자로 기입한다.
   • send() : 요청을 발송한다. POST의 경우 데이터를 같이 보내야하는데 send()의 파라미터에 데이터를 같이 넣어준다.
     이 때, setRequestHeader()를 통해서 데이터가 어떤 종류인지(Content-Type) 미리 정의를 해줘야한다.

✅ ajax의 특징

• 페이지는 유지하고 일부 데이터만 가져와 갱신을 할 수 있다.
• XMLHttpRequest 객체를 이용하여 통신을 한다.

❎ ajax의 단점

• Vanilla JS로 ajax 구현 시 코드가 꽤 길어진다. jQuery와 같이 사용 시 가독성이 올라간다.
• Promise 기반이 아니다.

🔎 axios

Promise 기반의 HTTP 통신 라이브러리이다. 최근에 fetch와 함께 통신할 때 많이 사용하는데, 아직까지는 axios를 더 많이 사용하는 것으로 보인다.
외부 라이브러리이기 때문에 사용하기 위해서는 별도로 설치를 해주어야한다.

✅ axios의 특징

• Promise를 기반으로 동작해서 이후 데이터 처리 시 콜백을 사용하지 않을 수 있다.
• 내부적으로 xhr을 사용하여 동작한다.
• 크로스 브라우징이 잘 지원되어 구형 브라우저에서도 사용이 가능하다.
• 일정시간 내 응답이 안 올경우 timeout 기능도 지원한다.
• POST, PUT 요청 시 body에 보낼 데이터는 stringify를 사용할 필요가 없다.

❎ axios의 단점

• 외부 라이브러리이기 때문에 별도 설치가 필요하다.

🔎 fetch

fetch는 ES6에서 도입된 내장 라이브러리이다. axios와는 다르게 내장 라이브러리이기 때문에, 별도 설치 필요 없이 바로 사용할 수 있다는 것이 최대 장점이다.
현재까지는 사용률이나 크로스 브라우징 등의 면에서 axios보다는 인지도가 적은 것으로 보이지만, 버전이 올라감에 따라 더 비중이 커지지 않을까 생각한다.

✅ fetch의 특징

• 자바스크립트 내장 라이브러리
• 자바스크립트 버전이 올라가도 코드를 크게 걱정할 필요가 없다.
• Promise 기반이며 xhr을 사용하지 않는다.
• 응답을 쪼개서 전달 받을 수 있다.(진행률 등에 사용 가능)

❎ fetch의 단점

• axios와는 달리 요청할 때 보낼 data를 따로 변환해서 보내줘야한다.
• 응답 timeout 기능은 제공되지 않는다.
• 데이터를 다 받아도 실패가 발생할 수 있다.
• ES6 기능이어서 구형 브라우저에서 제대로 동작하지 않는다.