Promise 체이닝을 통한 비동기 코드의 깔끔한 구조화

13 Sep 2023

Promise

비동기 코드를 깔끔하고 보기 좋게 구조화하는 것은 매우 중요합니다. 코드가 복잡하고 장황하다면 이해하기 어려우며 유지보수하기도 어려워집니다. 이러한 문제를 해결하기 위해, Promise 체이닝은 비동기 코드를 더 깔끔하게 구조화하는 강력한 기법입니다.

Promise란?

Promise는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. Promise는 세 가지 상태를 가지고 있습니다:

대기 중 (pending): 아직 결과를 얻지 못한 상태
이행됨 (fulfilled): 비동기 작업이 성공적으로 완료된 상태
거부됨 (rejected): 비동기 작업이 실패한 상태

Promise 체이닝

Promise 체이닝은 비동기 작업을 연속적으로 실행하고 결과를 처리하기 위해 Promise를 연결하는 방법입니다. 각각의 비동기 작업은 then() 메서드를 호출하여 다음 작업을 연결할 수 있습니다. 이렇게 작업을 체인으로 연결하면 코드가 간결하고 읽기 쉬워집니다.

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => {
    // 오류 처리 로직
  });

위의 코드는 fetch API를 사용하여 비동기적으로 데이터를 가져오고, 이후 데이터를 JSON 형식으로 변환한 다음 데이터를 처리하는 예시입니다. 체이닝된 then() 메서드를 통해 코드를 순차적으로 실행하고 결과를 다음으로 전달할 수 있습니다. catch() 메서드는 예외 처리를 담당합니다.

실전 예제

Promise 체이닝을 사용하여 깔끔한 비동기 코드를 작성하는 예제를 살펴보겠습니다. 아래의 예시는 사용자가 입력한 검색어를 찾는 비동기 함수를 구현한 코드입니다. 이 함수는 사용자가 입력한 검색어를 서버에 전송하고, 검색 결과를 받아와 화면에 표시합니다.

function search(keyword) {
  fetch('/search', { method: 'POST', body: JSON.stringify({ keyword }) })
    .then(response => response.json())
    .then(data => {
      if (data.length > 0) {
        displayResults(data);
      } else {
        displayNoResults();
      }
    })
    .catch(error => {
      displayError(error);
    });
}

function displayResults(data) {
  // 검색 결과를 화면에 표시하는 로직
}

function displayNoResults() {
  // 검색 결과가 없음을 사용자에게 안내하는 로직
}

function displayError(error) {
  // 오류를 사용자에게 알리는 로직
}

위의 예시에서는 사용자가 입력한 검색어를 서버에 전송하기 위해 fetch API를 사용하고, 이후 검색 결과를 처리하는 로직을 체이닝된 then() 메서드에서 작성합니다. 검색 결과가 있을 경우 displayResults() 함수를 호출하고, 결과가 없는 경우 displayNoResults() 함수를 호출합니다. 오류가 발생한 경우 catch() 메서드에서 displayError() 함수를 호출하여 사용자에게 오류를 알리도록 합니다.

Promise 체이닝을 통해 비동기 코드를 깔끔하고 구조화된 방식으로 작성하면 코드를 이해하고 유지보수하기 훨씬 쉽습니다. 코드의 가독성을 높이고 잠재적인 버그를 줄이기 위해, 비동기 코드를 작성할 때 Promise 체이닝을 고려해보세요.

#Promise #비동기코드 #깔끔한구조화