[javascript] 프로미스를 활용한 실시간 데이터 업데이트

07 Dec 2023

javascript

프로미스(Promise)는 JavaScript에서 비동기 작업을 처리하는 방법 중 하나입니다. 프로미스를 사용하면 비동기 작업을 보다 효율적으로 처리할 수 있으며, 실시간 데이터 업데이트에도 유용하게 활용할 수 있습니다.

실시간 데이터 업데이트는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 사용자에게 실시간으로 최신 데이터를 제공하기 위해서는 서버와의 통신을 통해 데이터를 주기적으로 업데이트해야 합니다. 이때 프로미스를 사용하면 데이터를 비동기적으로 업데이트할 수 있으며, 코드의 가독성과 유지보수성도 향상됩니다.

아래는 프로미스를 활용하여 실시간 데이터 업데이트를 구현하는 예제 코드입니다.

// 서버로부터 실시간 데이터를 받아오는 함수
function fetchData() {
  return new Promise((resolve, reject) => {
    // 서버로부터 데이터를 비동기적으로 받아옴
    // 데이터를 성공적으로 받아오면 resolve 함수 호출
    // 데이터를 받아오는 도중 에러가 발생하면 reject 함수 호출
    // resolve 함수에는 받아온 데이터가 인자로 전달됨
    // reject 함수에는 에러 메시지가 인자로 전달됨
    setTimeout(() => {
      const data = '새로운 데이터';
      resolve(data);
    }, 1000);
  });
}

// 데이터를 업데이트하는 함수
function updateData() {
  fetchData()
    .then((data) => {
      // 받아온 데이터를 처리하는 로직 작성
      console.log('업데이트된 데이터:', data);
    })
    .catch((error) => {
      // 에러 처리 로직 작성
      console.error('데이터 업데이트 중 에러 발생:', error);
    });
}

// 주기적으로 데이터를 업데이트하는 함수 호출
setInterval(() => {
  updateData();
}, 5000);

위 코드에서는 fetchData 함수를 통해 서버로부터 실시간 데이터를 받아옵니다. 데이터를 받아오는 도중 에러가 발생하면 catch 구문이 실행되어 에러 처리를 합니다. 데이터를 성공적으로 받아오면 then 구문이 실행되어 데이터를 처리하는 로직을 작성할 수 있습니다.

updateData 함수는 fetchData 함수를 호출하고, 데이터를 처리하는 로직과 에러 처리 로직을 작성합니다. setInterval 함수를 사용하여 일정한 주기로 updateData 함수를 호출하여 데이터를 업데이트합니다.

이처럼 프로미스를 활용하여 실시간 데이터 업데이트를 구현할 수 있습니다. 프로미스를 사용하면 비동기 작업을 보다 편리하게 처리할 수 있고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

참고문서:

MDN Web Docs - Promise