[JavaScript] 자바스크립트 XHR, Ajax, Axios, Fetch (비동기 통신)

📝XHR

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용 
즉, 비동기 통신을 위해 필요한 객체

 

---

📝 Ajax

Asynchronous JavaScript And XML의 약자로 JavaScript를 이용해 비동기 HTTP 통신 라이브러리입니다.
XMLHttpRequest(XHR) 객체를 이용해 필요한 데이터만 불러올 수 있습니다.
jQuery가 있어야 Ajax가 사용한게 아닙니다.
순수 Ajax를 이용해서 구현이 가능한데 너무 복잡하기 때문에 일반적으로 jQuery를 사용합니다.

 

💗장점

jQuery를 통해 쉽게 구현 가능
성공, 실패  등 Event에 따른 Handle 가능

⚠️단점

jQuery를 이용해야 사용이 편하다
Promise 기반이 아니다.

 

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 처리 
  if (xhr.readyState === xhr.DONE) {  // 요청 완료시
    if (xhr.status === 200 || xhr.status === 201) { // 200 또는 201 서버 상태 코드(성공)
      console.log(xhr.responseText);
    } else { // 실패
      console.error(xhr.responseText);
    }
  }
};

xhr.open('GET', 'https://localhost:3000'); // 통신방식, 통신 할 EndPoint
xhr.send(); // xhr 기반으로 요청 
// xhr.abort(); // xhr 기반 요청 취소

XHR 기반으로 통신 (jQuery 사용 X) 

 

 

$.ajax({
    url: https://localhost:3000, // 통신할 EndPoint
    type: 'GET', // 통신 방식
    success: function onData (data) { // 성공 시
        console.log(data);
    },
    error: function onError (error) { // 실패 시
        console.error(error);
    }
});

ajax를 이용한 통신 (jQuery 사용 O)

 

---

📝 Axios

Node.js와 비동기 통신을 목적으로 만들어진 Promise 기반 HTTP 통신 라이브러리입니다.
return을 Promise로 하기 때문에 비동기를 좀 더 효율적으로 할 수 있습니다.

 

 

💗장점

Promise 기반으로 데이터 다루기가 편리
fetch에는 없는 다양한 처리방법이 존재

 

 

⚠️단점

사용을 위해 모듈 설치 필요 

 

axios({
  method: 'post',
  url: '/get-member',
  data: {
  	id : "monday2"
  }
});

axios 사용 코드

 

 

 

---

📝 fetch

ES6부터 들어온 JavaScript 내장 라이브러리입니다.
Promise 기반이며 내장 라이브러리라는 장점으로 타 라이브러리를 import할 필요가 없습니다.

💗장점

별도 import가 없기 때문에 time resource등 이점
Promise 기반으로 데이터 다루기가 편리

⚠️단점

지원 하지 않는 웹브라우저 존재 (IE11 등...)
상대적으로 Axios에 비해 빈약한 기능

 

fetch("https://localhost:3000/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "monday2",
    description: "hello world",
  }),
}).then((response) => console.log(response));
// Response {type: 'basic', url: 'http://localhost:8080/confirmCaptChaColor?userAnswer=13', redirected: false, status: 200, ok: true, …}
// MIME plain/text       → response.text() 사용
// MIME application/json → response.json() 사용

 

 

 

 

 

🔗 참고 및 출처

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch

[개발상식] Ajax와 Axios 그리고 fetch

https://cocoon1787.tistory.com/756

[개발상식] Ajax, axios, fetch 차이점 장단점