자바스크립트 Promise 체이닝

10 Sep 2023

javascript

자바스크립트 Promise 체이닝은 비동기 작업을 처리하는 데 유용한 패턴입니다. Promise는 비동기 작업의 결과를 나타내는 객체로, 체이닝을 통해 여러 개의 비동기 작업을 순차적으로 실행할 수 있습니다.

Promise 체이닝을 사용하면 더 간결하고 가독성이 좋은 코드를 작성할 수 있으며, 콜백 지옥(callback hell)을 피할 수 있습니다.

기본적인 Promise 체이닝

Promise 체이닝을 이해하기 위해 간단한 예제 코드를 살펴보겠습니다.

const firstAsyncFunction = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('First result');
    }, 1000);
  });
};

const secondAsyncFunction = (data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Second result with ${data}`);
    }, 1000);
  });
};

firstAsyncFunction()
  .then((result) => {
    console.log(result); // 'First result'
    return secondAsyncFunction(result);
  })
  .then((result) => {
    console.log(result); // 'Second result with First result'
  })
  .catch((error) => {
    console.error(error);
  });

위의 예제 코드는 firstAsyncFunction과 secondAsyncFunction 이라는 두 개의 비동기 함수가 있습니다. 먼저 firstAsyncFunction을 호출하여 결과 값을 얻은 후, 그 값을 secondAsyncFunction에 전달하여 다시 실행하는 형태로 작성되어 있습니다.

이 예제에서는 firstAsyncFunction을 호출한 후, 첫 번째 then 오류 없이 실행이 완료되면 그 다음 then으로 넘어가게 됩니다. 최종적으로 secondAsyncFunction에서 반환된 결과 값을 출력합니다. 오류가 발생하면 catch로 이동하여 처리합니다.

Promise 체이닝의 이점

Promise 체이닝을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

가독성이 좋은 코드: 비동기 작업을 순차적으로 연결하여 코드가 직관적이고 읽기 쉽게 됩니다.
에러 처리: 체인 내부에서 발생하는 오류에 대한 처리를 쉽게 할 수 있습니다. catch 블록을 사용하여 오류를 한 곳에서 관리할 수 있습니다.
중단 및 종료 제어: 중단하고 싶은 시점에 then 또는 catch 블록에서 return 또는 throw를 통해 종료할 수 있습니다.

Promise 체이닝을 통해 비동기 작업을 효율적이고 간결한 방식으로 처리할 수 있습니다. 이를 통해 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다.