[javascript] 자바스크립트의 비동기 제어와 REST API 호출

08 Dec 2023

javascript

자바스크립트는 비동기적인 특성을 갖고 있어, 비동기 제어가 매우 중요합니다. 특히 웹 애플리케이션에서는 REST API를 호출하는 과정에서 많은 비동기적인 작업이 발생합니다. 이번 글에서는 자바스크립트의 비동기 제어 개념과 REST API를 호출하는 방법에 대해 알아보겠습니다.

비동기 제어

자바스크립트에서의 비동기 제어는 콜백 함수, 프로미스, async/await 등을 통해 이루어집니다. 가장 기본적인 방법은 콜백 함수를 사용하는 것인데, 이는 콜백 지옥과 코드 가독성 문제를 야기할 수 있습니다. 따라서 프로미스나 async/await를 사용하여 비동기 코드를 보다 깔끔하게 작성할 수 있습니다.

콜백 함수

function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}

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

프로미스

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}

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

async/await

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}

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

getData();

REST API 호출

REST API를 호출할 때에는 fetch나 Axios와 같은 라이브러리를 사용하여 비동기적으로 데이터를 요청합니다.

fetch API

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

Axios 라이브러리

Axios 라이브러리를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다.

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

결론

자바스크립트에서의 비동기 제어는 콜백 함수, 프로미스, async/await를 통해 이루어집니다. REST API를 호출할 때에는 fetch나 Axios와 같은 라이브러리를 통해 비동기적으로 데이터를 다룰 수 있습니다. 적절한 비동기 제어와 REST API 호출 방법을 익혀 웹 애플리케이션을 보다 효율적으로 개발할 수 있습니다.

참고 문헌

MDN Web Docs: Asynchronous JavaScript