[javascript] 자바스크립트에서의 비동기 제어와 HTTP 요청

08 Dec 2023

javascript

자바스크립트는 비동기적으로 작동하는 특성을 가지고 있어, HTTP 요청과 같은 비동기 작업을 다루는 데 적합합니다. 이번 글에서는 자바스크립트에서의 비동기 제어와 HTTP 요청을 다루는 방법을 살펴보겠습니다.

비동기 제어

자바스크립트에서의 비동기 제어를 위해 주로 콜백 함수, 프로미스(Promise), async/await을 사용합니다.

콜백 함수

콜백 함수는 비동기 작업이 완료됐을 때 실행할 함수를 전달하는 방식으로, 콜백 지옥(callback hell)과 같은 문제를 일으킬 수 있습니다.

function getData(callback) {
  setTimeout(() => {
    const data = 'some data';
    callback(data);
  }, 1000);
}

getData((data) => {
  console.log(data);
});

프로미스

프로미스는 ES6에서 추가된 개념으로, 비동기 작업의 성공 또는 실패를 나타냅니다.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) {
        const data = 'some data';
        resolve(data);
      } else {
        reject('error');
      }
    }, 1000);
  });
}

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await는 ES8에서 추가된 비동기 처리를 위한 키워드로, 프로미스 기반의 비동기 코드를 보다 깔끔하게 작성할 수 있습니다.

async function fetchData() {
  try {
    const data = await getData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

HTTP 요청

서버와의 통신을 위해 주로 XMLHttpRequest(XHR) 객체, Fetch API 등을 사용합니다.

XMLHttpRequest

가장 오래된 방법 중 하나로, 비동기적으로 서버와 데이터를 교환할 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Fetch API

최신 웹 표준으로, 더 간단하고 강력한 HTTP 요청 기능을 제공합니다.

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

마무리

자바스크립트에서의 비동기 제어와 HTTP 요청은 웹 개발에서 매우 중요한 부분이며, 이를 잘 다루는 것이 중요합니다. 프로미스와 async/await를 활용하여 보다 가독성 좋고 효율적인 코드를 작성할 수 있습니다. 또한, Fetch API를 사용하여 더 강력한 HTTP 요청을 손쉽게 처리할 수 있습니다.

참고문헌:

MDN Web Docs