비동기통신 라이브러리

Ahyeon, Jung·2023년 9월 19일

비동기 통신

서버와 클라이언트 간에 데이터를 주고받을 때, 요청과 응답이 서로 독립적으로 처리되는 것

AJAX(Asynchronous JavaScript and XMLdml)

웹 페이지에서 데이터를 비동기적으로 로드하거나 전송할 수 있게 해주는 기술
자바스크립트의 XMLHttpRequest(XHR) 객체를 사용하여 서버와 통신하며 페이지를 다시 로드하지 않고도 데이터를 업데이트할 수 있게 해줌
대부분의 브라우저에서 지원이 되며, XHR 객체의 다양한 속성을 이용가능
비동기 콜백 구문이 복잡해질 수 있으며, 상대적으로 예외 처리가 어려움
JSON, XHL, HTML 등 다양한 데이터 형식 처리 가능

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        // 데이터 처리
    }
};
xhr.send();

Fetch API

AJAX를 대체하고 개선한 비동기 데이터 가져오기 및 전송을 위한 기술
브라우저의 내장 API를 사용해 서버와 통신(ES6)
Promise 구문을 사용하여 비동기적으로 HTTP 요청과 응답을 처리
별도의 객체를 사용하지 않고 브라우저의 내장 함수를 바로 사용할 수 있음
Promise 구문을 사용하여 예외 처리가 간단하며 전체적인 코드 가독성이 좋음
예전 브라우저에서는 지원하지 않을 수 있으며 XHR 객체와 달리 요청을 취소할 수 없음

fetch("https://api.example.com/data")
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        // 데이터 처리
    })
    .catch(function (error) {
        console.log("에러 발생: " + error);
    });

Axios

자바스크립트로 작성된 HTTP 클라이언트 라이브러리
Promise를 사용하여 HTTP 요청을 처리하며, 브라우저와 Node.js(서버) 환경 모두에서 사용 가능

fetch와 달리 요청과 응답의 취소와 중단이 가능하며 XSRF 보호를 자동으로 지원
JSON 데이터를 자동으로 파싱하여 사용자에게 객체로 제공
오류 처리 용이
단, 별도의 라이브러리를 설차하거나, CDN으로 연결하는 과정이 필요함

*XSRF(Cross-Site Request Forgery)는 웹 사이트에서 발생할 수 있는 보안 취약점 중 하나로, 사용자가 의도하지 않은 요청을 다른 웹사이트로 전송하게끔 하는 공격

const axios = require("axios"); // Node.js에서 사용 시
axios.get("https://api.example.com/data")
    .then(function (response) {
        // 데이터 처리
    })
    .catch(function (error) {
        console.log("에러 발생: " + error);
    });