비동기 통신 라이브러리

@t189216·2024년 3월 25일

😎 프론트엔드

목록 보기

31/31

비동기 통신 종류에는 AJAX , fetch API, Axios 가 있습니다.

↗️ 동기? 비동기?

AJAX (Asynchronous JavaScript And XML)

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

XMLHttpRequest 객체를 만들어 사용하며, 이 객체를 사용하여 서버로 요청을 보내고, 응답을 받습니다.

AJAX 예시

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할 필요 없이 사용 가능합니다. Promise 기반으로 동작하기 때문에 비동기 코드를 작성하기 쉽고 간결하게 만들어줍니다.

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

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

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

fetch API 예시

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

fetch API를 사용하여 GET 요청을 보내려면 주소로 GET요청을 보내고, 응답을 JSON 형식으로 변환하여 받아 콘솔에 출력하면 됩니다.

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));