Promise 객체 이해하기

프로그래머스 과제 테스트에서 비동기로 파일 내용을 읽어올 때 Promise를 사용하는 방법을 시도하게 되었다. 그동안 async/await만 사용하고 Promise는 사용해본 적이 없었는데, 이번 기회에 공부하면서 포스팅으로도 정리해봤다.

Promise

Promise는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값이다. (MDN) 즉, 비동기 처리가 실행됐지만 결괏값은 나중에 사용할 수 있도록 만든 객체인 것이다.

Promise의 기본 형태는 다음과 같다.

const promise = new Promise((resolve, reject) => {
  // 비동기 처리 수행
  if (비동기 처리의 성공) {
    resolve('result');
  } else {
    reject('failure reason')
  }
});                      

new 연산자로 Promise 객체를 생성하면 executor라는 함수를 실행하는데, 이 함수는 resolve와 reject 함수를 인자로 받는다. resolve 함수는 비동기 작업이 성공적으로 완료됐을 때 호출되고, reject 함수는 비동기 작업이 실패했을 때 호출된다.

구체적으로 XHR 객체를 활용해 GET 요청을 하는 예시를 살펴보자.

const promiseGet = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send()
    
    xhr.onload = () => {
      if (xhr.status === 200) {
      // 성공적으로 응답을 전달받으면 resolve 함수를 호출한다.
        resolve(JSON.parse(xhr.response))
      } else {
        // 에러 처리를 위해 reject 함수를 호출한다.
        reject(new Error(xhr.status));
      }
    };
  });
};

// 프로미스 반환
promiseGet('https://jsonplaceholder.typicode.com/posts/1')
	.then(res => console.log(res));
	.catch(err => console.error(err));
	.finally(() => console.log('Bye!'));

promiseGet이라는 함수를 만든다. 이 함수는 Promise 객체를 리턴하는데, Promise는 생성되자마자 executor 함수를 실행한다. executor 함수는 resolve와 reject 함수를 인자로 가진다.

XMLHttpRequest 객체를 생성한 후 url로 GET 요청을 보낸다. 응답을 받았을 때 상태코드가 200이면 resolve 함수를 호출하여 응답값을 파싱한 후 전달한다. 상태코드가 200이 아니면 reject 함수를 호출하고 에러를 발생시킨다.

이 함수를 나중에 호출했을 때 성공 시에는 응답 결과를 콘솔에 출력하고, 실패 시에는 에러를 콘솔에 출력하며, 최종적으로 'Bye!'가 출력되며 마무리된다.

참고 자료

https://ko.javascript.info/promise-basics
https://sangminem.tistory.com/284
모던 자바스크립트 Deep Dive