자바스크립트에서 프로미스(Promise)를 활용한 비동기 처리 방법 1편 - 프로미스의 개념과 사용 방법

 

개요

프로미스(Promise)는 자바스크립트에서 비동기 처리를 위한 방법 중 하나로, 콜백 함수를 대체하여 더욱 간편하고 가독성 높은 코드를 작성할 수 있도록 도와줍니다.

이번에는 프로미스의 개념과 사용 방법, 그리고 콜백 함수와의 차이점에 대해 알아보겠습니다.

 

프로미스(Promise)란?

프로미스는 비동기 처리 작업의 결과를 나타내는 객체입니다.

비동기 처리 작업은 보통 네트워크 요청이나 파일 입출력 등이 포함됩니다.

프로미스를 사용하면 비동기 처리 작업이 완료되기 전에도 다른 코드를 실행할 수 있으며, 작업이 완료된 후 결과 값을 받아와 처리할 수 있습니다.

 

프로미스의 사용 방법

프로미스는 Promise 객체를 생성하여 사용합니다.

Promise 객체는 다음과 같은 구조를 갖습니다.

 

new Promise((resolve, reject) => {
  // 비동기 처리 작업 수행
})

위 코드에서 resolve와 reject는 함수입니다.

resolve 함수는 작업이 성공적으로 완료되었을 때 결과 값을 전달하며, reject 함수는 작업이 실패하였을 때 실패 원인을 전달합니다.

 

다음은 프로미스를 사용하여 네트워크 요청을 처리하는 예제입니다.

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network Error'));
    };
    xhr.send();
  });
}

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

위 코드에서 fetchData 함수는 프로미스를 반환합니다.

프로미스가 반환되면 then 메소드와 catch 메소드를 사용하여 작업이 완료된 후 결과 값을 처리합니다.

then 메소드는 성공적으로 처리된 경우 결과 값을 전달받고, catch 메소드는 작업이 실패한 경우 실패 원인을 전달받습니다.

 

콜백 함수와의 차이점

프로미스는 콜백 함수를 대체하여 사용할 수 있는 방법 중 하나입니다.

콜백 함수는 작업이 완료된 후 실행되는 함수이므로, 코드의 실행 순서를 예측하기 어렵고 가독성이 떨어집니다.

반면 프로미스는 비동기 처리 작업이 완료된 후 처리할 작업을 then 메소드에 정의함으로써 코드의 가독성을 높일 수 있습니다.

또한, 콜백 함수는 에러 처리를 위한 별도의 콜백 함수를 정의해야 했지만, 프로미스는 catch 메소드를 사용하여 에러 처리를 하기 때문에 코드의 구조가 더욱 명확해집니다.

 

다음은 프로미스를 사용하지 않은 콜백 함수를 사용한 예제입니다.

 

function fetchData(url, successCallback, errorCallback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if (xhr.status === 200) {
      successCallback(xhr.responseText);
    } else {
      errorCallback(new Error(xhr.statusText));
    }
  };
  xhr.onerror = () => {
    errorCallback(new Error('Network Error'));
  };
  xhr.send();
}

fetchData('https://example.com/api/data',
  data => {
    console.log(data);
  },
  error => {
    console.error(error);
  }
);

위 코드에서 fetchData 함수는 네트워크 요청을 수행하고, 성공적으로 처리된 경우 successCallback 함수를 호출하며, 실패한 경우 errorCallback 함수를 호출합니다.

이 때 successCallback과 errorCallback은 함수로 전달되며, 작업이 완료된 후 실행됩니다.

이러한 구조 때문에 코드의 실행 순서를 예측하기 어렵고, 여러 개의 콜백 함수를 정의해야 하는 불편함이 있습니다.

 

코드의 가독성

콜백 함수를 사용하여 비동기 처리 작업을 처리하면, 콜백 함수가 중첩될 가능성이 있어 코드의 가독성이 떨어질 수 있습니다.

이를 콜백 지옥(callback hell)이라고 부릅니다.

 

fetchData('https://example.com/api/data', data1 => {
  console.log(data1);
  fetchData('https://example.com/api/another-data', data2 => {
    console.log(data2);
    fetchData('https://example.com/api/yet-another-data', data3 => {
      console.log(data3);
    });
  });
});

위 코드에서 fetchData 함수는 네트워크 요청을 수행하고, 요청이 완료된 후 전달된 콜백 함수를 호출합니다.

이러한 구조 때문에 코드의 가독성이 떨어지며, 여러 개의 콜백 함수를 중첩하게 될 경우 유지 보수성이 나빠질 수 있습니다.

 

반면에, 프로미스를 사용하여 비동기 처리 작업을 처리하면 코드의 가독성이 높아집니다.

프로미스는 비동기 처리 작업이 완료된 후 처리할 작업을 then 메소드에 정의함으로써 코드의 가독성을 높일 수 있습니다.

 

fetchData('https://example.com/api/data')
  .then(data1 => {
    console.log(data1);
    return fetchData('https://example.com/api/another-data');
  })
  .then(data2 => {
    console.log(data2);
    return fetchData('https://example.com/api/yet-another-data');
  })
  .then(data3 => {
    console.log(data3);
  });

위 코드에서 fetchData 함수는 프로미스를 반환합니다.

then 메소드를 사용하여 프로미스가 완료된 후 처리할 작업을 정의합니다.

이를 통해 코드의 가독성이 높아지며, 여러 개의 비동기 처리 작업을 순차적으로 처리할 수 있습니다.

 

에러처리

콜백 함수를 사용하여 비동기 처리 작업을 처리할 때, 에러 처리를 위한 별도의 콜백 함수를 정의해야 합니다.

 

fetchData('https://example.com/api/data', data => {
  console.log(data);
}, error => {
  console.error(error);
});

위 코드에서 fetchData 함수는 네트워크 요청을 수행하고, 요청이 완료되면 전달된 첫 번째 콜백 함수를 호출합니다.

하지만 요청이 실패할 경우 별도의 두 번째 콜백 함수를 호출하여 에러 처리를 수행합니다.

 

반면에, 프로미스를 사용하여 비동기 처리 작업을 처리할 때는 catch 메소드를 사용하여 에러 처리를 수행할 수 있습니다.

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

위 코드에서 catch 메소드를 사용하여 프로미스에서 발생한 에러를 처리합니다.
이를 통해 코드의 가독성이 높아지며, 에러 처리를 쉽게 수행할 수 있습니다.

 

비동기 처리 작업의 결과 값

콜백 함수를 사용하여 비동기 처리 작업을 처리할 때, 비동기 처리 작업의 결과 값을 전달하기 위해서는 콜백 함수를 호출할 때 해당 값을 전달해야 합니다.

 

fetchData('https://example.com/api/data', data => {
  console.log(data);
});

위 코드에서 fetchData 함수가 완료된 후 전달되는 데이터를 출력하기 위해 콜백 함수를 정의하고, 해당 함수 내부에서 데이터를 출력합니다.

 

반면에, 프로미스를 사용하여 비동기 처리 작업을 처리할 때는 then 메소드에서 전달된 데이터를 반환하면 됩니다.

 

fetchData('https://example.com/api/data')
  .then(data => {
    console.log(data);
  });

위 코드에서 fetchData 함수가 완료된 후 전달되는 데이터를 출력하기 위해 then 메소드 내부에서 데이터를 출력합니다.

 

결론

콜백 함수와 프로미스는 모두 비동기 처리 작업을 처리하는 방법 중 하나입니다.

하지만 두 방법 간에는 몇 가지 차이점이 있습니다.

콜백 함수를 사용할 경우 코드의 가독성이 떨어지고, 에러 처리와 결과 값 처리가 어려울 수 있습니다.

따라서 프로미스를 사용하여 비동기 처리 작업을 처리하는 것이 좋습니다.

프로미스를 사용하면 코드의 가독성이 높아지며, 에러 처리와 결과 값 처리도 쉽게 수행할 수 있습니다.