웹 비동기 통신 라이브러리 종류 (AJAX, FETCH, Axios)

---

Application을 만들때 가장 중요한 통신에는 동기와 비동기가 있다. 그의 차이점은 여기서 확인하자.

 

https://strap.tistory.com/75

동기, 비동기란?

 

 

웹 비동기 통신 종류중 JS에서 사용되는 HTTP 통신을 알아보자.

 

 

Ajax (Asynchronous JavaScript And XML)

 

Ajax는 JavaScript를 사용하여 서버로 데이터를 보내고, 서버에서는 XML, JSON 등의 데이터 형식으로 응답한다. 

 

이 데이터를 사용하여 웹 페이지의 일부분만 업데이트할 수 있다. 이를 통해 사용자 경험을 향상시키고, 서버 부하를 줄일 수 있다.

 

여기서 중요한 점은 Ajax는 XMLHttpRequest 객체 를 만들어 사용한다. 이 객체를 사용하여 서버로 요청을 보내고, 응답을 받는다. 

 

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 요청이 완료되고 응답 상태 코드가 200이면 응답을 처리합니다.
        document.getElementById("demo").innerHTML = this.responseText;
    }
};
xhttp.open("GET", "example.php", true);
xhttp.send();

위 코드는 이 코드는 "example.php" 파일에서 데이터를 가져와 "demo"라는 요소의 내용을 업데이트 한다.

 

 

---

fetch API

JavaScript의 내장 라이브러리 이기 때문에 따로 설치하거나 import할 필요없이 사용 가능하다.

 

👇 fetchAPI는 Promise기반?? 으로 동작하기 떄문에 비동기 코드를 작성하기 쉽고 간결하게 만들어준다.

Promise 기반 이란?

---

Promise는 JavaScript 비동기 처리 패턴 중 하나로 Promise를 사용하면 비동기적으로 실행되는 작업을 좀 더 간결하고 직관적으로 처리할 수 있다. Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체로, 이러한 결과에 따라 처리할 콜백 함수를 등록할 수 있다.

Promise의 가장 큰 특징 중 하나는 Promise 객체가 생성되면 즉시 실행되지 않고, 대신 작업이 완료될 때까지 기다리는 것이다. 이러한 특성으로 인해 비동기적으로 실행되는 작업을 처리할 때 콜백 지옥과 같은 코드 구조를 방지할 수 있다.

 

Promise는 다음과 같은 세 가지 상태(state)를 가진다.

• 대기중(pending): Promise 객체가 생성된 상태로 아직 작업이 완료되지 않은 상태
• 이행됨(fulfilled): Promise 객체가 생성된 이후에 비동기 작업이 성공적으로 완료된 상태
• 거부됨(rejected): Promise 객체가 생성된 이후에 비동기 작업이 실패한 상태

 

Promise를 사용하면 비동기 작업이 완료되었을 때 then() 메서드를 사용하여 이행됨(fulfilled) 상태에 대한 콜백 함수를 등록할 수 있다.

또한 catch() 메서드를 사용하여 거부됨(rejected) 상태에 대한 콜백 함수를 등록할 수 있다.

이러한 방식으로 Promise를 사용하면 비동기적으로 실행되는 작업을 간단하고 직관적으로 처리할 수 있다.

 

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

기본적인 fetchAPI를 사용하여 GET 요청을 보내는 방법은 위와 같다. 

 

주소로 GET요청을 보내고, 응답을 JSON 형식으로 변환하여 받아 콘솔에 출력한다. 에러가 발생한다면 error를 출력한다. 

 

 

POST방식을 사용하는 방법은 다음과 같다.

 

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

 

하지만 이 fecthAPI의 단점은 API 요청을 중간에 취소할 수 없고, 네트워크 에러 발생시 계속 기다려야한다는 단점이 있다.

 

 

---

Axios

axois 역시 promise 기반으로 HTTP 비동기 통신 라이브러리이다. 

 

크로스 브라우징 기반으로 브라우저 호환성이 뛰어나 브라우저, Node.js 환경에서 JSON 데이터 형식으로 변환하여 사용한다. 

 

 

구분	Fetch	Axios
HTTP 클라이언트 라이브러리	브라우저 기본 제공 라이브러리 (fetch API)	외부 라이브러리 (npm 패키지)
기능	HTTP 요청을 보내고 응답을 처리하는 기본 기능 제공	HTTP 요청을 보내고 응답을 처리하는 기본 기능 제공 + 추가 기능 제공
Promise 기반	Promise 기반	Promise 기반
브라우저 호환성	IE11 이상을 제외한 대부분의 최신 브라우저 지원	모든 최신 브라우저 지원 + IE11 이상도 지원
헤더 설정	직접 헤더를 설정해야 함	헤더 설정을 쉽게 할 수 있는 메서드 제공
요청 취소 기능	제공하지 않음	요청 취소 기능을 제공함
인터셉터 기능	제공하지 않음	요청과 응답을 가로채고 수정하는 기능 제공
코드량	비교적 간단한 코드로 작성 가능	조금 더 많은 코드가 필요함

 

 

 

---

📍출처

https://systemoutofmemory.com/blogs/the-programmer-blog/javascript-understanding-ajax-calls

JavaScript - Understanding AJAX calls