모던자바스크립트 Deep Dive - 5

연꽃·2021년 12월 23일
0

컴퓨터 서적

목록 보기
9/14

45장 프로미스(Promise)

🏀 프로미스(Promise)란?

프로미스는 ES6에서 도입된 자바스크립트 비동기 처리에 사용되는 객체이다. 프로미스는 서버에 요청을 보내고 서버에서 요청을 한 데이터를 받아와서 화면에 표시할 때 많이 사용한다. 그런데 프로미스를 활용하지 않고 단순히 서버에 요청을 보낸다면, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 나오게 된다.

이는 비동기 처리가 제대로 되지 않았기 때문이다. 물론 비동기 처리를 하는 방법이 프로미스만 있는 것은 아니다. 기본적으로 비동기 처리를 하기 위해서는 콜백 함수를 사용한다. 하지만 이는 큰 단점을 갖고 있는데 이를 극복하기 위해 프로미스가 도입된 것이다.

🏀 비동기 처리를 위한 콜백 패턴의 단점

비동기 처리를 위한 콜백 패턴의 단점은 크게 두 가지가 있다. 콜백 헬에러 처리의 한계가 그것이다. 먼저 콜백 헬부터 알아보자.

const get = (url, callback) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET',url);
  xhr.send();
  
  xhr.onload = () => {
    if(xhr.status === 200){
      callback(JSON.parse(xhr.response));
    } else {
      console.error(`${xhr.status} ${xhr.statusText}`);
    }
  };
};

const url = 'https://jsonplaceholder.typicode.com';

get(`${url}/posts/1`, ({userId}) => {
  console.log(userId);
  
  get(`${url}/users/${userId}`, userInfo => {
    console.log(userInfo);
  });
});

위 코드는 취득한 데이터인 userId를 활용하여 또 다시 get요청을 보낸다. 이러한 콜백 헬은 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다.

다음으로 에러 처리의 한계이다. 기본적으로 에러처리를 할 때, 많이 사용하는 것이 try... catch...finally문이다. 그러나 비동기 처리의 경우에는 콜백 함수가 발생시킨 에러는 catch 코드 블록에서 캐치되지가 않는다. 따라서 에러 처리가 매우 곤란한 상황이 벌어지게 된다.

이러한 문제를 극복하기 위하여 프로미스가 도입된 것이다.

🏀 프로미스의 생성

프로미스 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달 받는다. 기본적으로 프로미스의 생성은 다음과 같다.

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

🏀 프로미스의 상태

프로미스는 비동기 처리 진행에 따라 다음과 같은 상태정보를 갖는다.

프로미스의 상태 정보의미상태 변경 조건
pending비동기 처리가 아직 수행되지 않은 상태프로미스가 생성된 직후 기본 상태
fulfilled비동기 처리가 수행된 상태(성공)resolve 함수 호출
rejected비동기 처리가 수행된 상태(실패)reject 함수 호출

프로미스 처리의 흐름은 다음 그림과 같다.

🏀 프로미스의 후속 처리 메서드

프로미스의 후속 처리 메서드는 then, catch, finally가 있다.

먼저 then의 경우 두 개의 콜백 함수를 인수로 전달받는다. 첫 번째 콜백 함수는 비동기 처리가 성공했을 때 호출되는 성공 처리 콜백 함수이며, 두 번째 콜백 함수는 비동기 처리가 실패했을 때 호출되는 실패 처리 콜백 함수이다.

catch 메서드는 한 개의 콜백 함수를 인수로 전달받는데 이는 프로미스가 rejected 상태인 경우에만 호출된다.

finally메서드는 한 개의 콜백 함수를 인수로 전달받는다. 이 콜백 함수는 성공, 실패와 상관없이 무조건 한 번 호출된다. 이는 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용하다.

참고 : 모던 자바스크립트 Deep Dive

profile
우물에서 자라나는 중

0개의 댓글