45. 프로미스

angie·2023년 3월 4일

JavaScript TIL javascript deep dive

JavaScript Deep Dive

목록 보기

18/18

프로미스가 생겨난 이유

전통적인 콜백 패턴의 단점을 보완하기 위해

ES6에서 비동기 처리를 위한 전통적인 콜백 패턴의 단점을 보완하기 위해 프로미스를 도입했다.

1. 콜백 패턴의 단점

콜백 헬
에러처리의 한계

1) 콜백 헬

콜백 헬이 발생하는 이유

비동기 함수 내부에 비동기로 동작하는 함수는 비동기 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당할 수 없기 때문에 비동기 결과를 전달한 콜백 함수를 통해 처리해야한다.
- 왜? 비동기 함수는 태스크 큐에 대기하고 있다가 콜 스택이 비면 콜 스택으로 이동하여 실행되기 때문에 상위 함수가 종료될 때까지 기다려야하기 때문

비동기 함수는 비동기 처리 결과를 외부에 반환할수도, 상위 스코프의 변수에 할당할수도 없다.

이에 대한 예시를 살펴보자.

예시1

비동기 함수의 반환값을 변수에 저장하는 경우

// GET 요청을 위한 비동기 함수
const get = url => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();

  xhr.onload = () => {
    if (xhr.status === 200) {
      // ① 서버의 응답을 반환한다.
      return JSON.parse(xhr.response);
    }
    console.error(`${xhr.status} ${xhr.statusText}`);
  };
};

// ② id가 1인 post를 취득
const response = get('https://jsonplaceholder.typicode.com/posts/1');
console.log(response); // undefined

get 함수가 호출되면 GET 요청을 전송한 뒤 onload 이벤트 핸들러를 등록한 뒤, undefined를 반환하고 즉시 종료된다.
onload 이벤트 핸들러는 get 함수가 종료된 이후에 실행된다.

예시2

비동기 함수의 반환값을 상위 스코프의 변수에 할당하는 경우

let todos;

// GET 요청을 위한 비동기 함수
const get = url => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();

  xhr.onload = () => {
    if (xhr.status === 200) {
      // ① 서버의 응답을 상위 스코프의 변수에 할당한다.
      todos = JSON.parse(xhr.response);
    } else {
      console.error(`${xhr.status} ${xhr.statusText}`);
    }
  };
};

// id가 1인 post를 취득
get('https://jsonplaceholder.typicode.com/posts/1');
console.log(todos); // ② undefined

onload 이벤트 핸들러에 바인딩한 함수는 언제나 console.log(todos)가 종료한 이후에 호출된다.

왜 이러한 문제가 발생하는지 코드 실행 과정을 통해 살펴보자.

get 함수의 호출
- get 함수의 실행 컨텍스트가 생성되고 실행 텍스트 스택(콜 스택)에 푸시된다.
get 함수의 실행
- onload 이벤트 핸들러 프로퍼티에 이벤트 핸들러가 바인딩된다.
get 함수의 종료
- get 함수가 종료되며 get 함수의 실행 컨텍스트가 콜 스택에서 합되어 제거된다.
console.log 호출
- console.log 의 실행 컨텍스트가 생성되어 실행 컨텍스트 스택에 푸쉬된다.
load 이벤트 발생
- load 이벤트 핸들러는 비동기 함수이므로 load 이벤트가 발생하면 일단 태스크 큐에 저장되어 대기하며 콜 스택이 빌 때까지 기다린다.
- load 이벤트 핸들러는 console.log 함수가 종료되며 실행 컨텍스트가 콜 스택에서 제거되어야 콜 스택이 비어 콜 스택으로 푸시되어 실행된다.
- load 이벤트 핸들러가 실행되는 시점은 이미 console.log 함수가 종료된 후이다.
- 결론적으로 load 이벤트 핸들러는 console.log 함수가 종료되어야 실행되므로 console.log는 undefined를 출력하고 종료된다.

이러한 과정을 통해 비동기 함수의 결과값은 todos에 할당되지 못하고 undefined로 출력되는 것이다.

이러한 이유로 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야하기 때문에, 콜백 함수를 전달하여 비동기 함수 내부에서 그 처리 결과에 대한 후속처리를 한다.

이를 통해 발생하는 상황이 콜백 헬이다.

콜백 헬

// GET 요청을 위한 비동기 함수
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';

// id가 1인 post의 userId를 취득
get(`${url}/posts/1`, ({ userId }) => {
  console.log(userId); // 1
  // post의 userId를 사용하여 user 정보를 취득
  get(`${url}/users/${userId}`, userInfo => {
    console.log(userInfo); // {id: 1, name: "Leanne Graham", username: "Bret",...}
  });
});

2) 에러 처리의 한계

콜백 패턴의 두번째 문제점은 에러 처리가 어렵다는 것이다.

예시

try {
  setTimeout(() => { throw new Error('Error!'); }, 1000);
} catch (e) {
  // 에러를 캐치하지 못한다
  console.error('캐치한 에러', e);
}

위 예시코드에서 setTimeout의 콜백 함수에서 발생한 에러를 catch문은 캐치하지 못한다.

그 이유는?

에러는 호출자 방향으로 전파되는데, 콜백 함수의 에러의 호출 주체는 setTimeout이 아니기 때문이다.

코드 실행 과정을 찬찬히 살펴보며 알아보자.

setTimeout 호출
- setTimeout 함수의 실행 컨텍스트가 생성되며 콜 스택에 푸시되고 실행된다.
setTimeout 종료
- 비동기 함수이기 때문에 콜백 함수가 호출되는 것을 기다리지 않고 즉시 종료되고 콜 스택에서 제거된다.
콜백 함수가 태스크 큐로 푸쉬
- 타이머가 만료되면 콜백 함수는 태스크 큐로 푸쉬된다.
콜백 함수의 실행
- 콜 스택이 비었을 때 이벤트 루프에 의해 콜 스택으로 푸쉬되어 실행된다.
- 이 시점에서 setTimeout 함수는 이미 콜 스택에서 제거된 상태로 콜백 함수를 호출한 주체는setTimeout이 아니다.
- 에러는 호출자 방향으로 전파되기 때문에 콜백 함수가 발생시킨 에러는 catch 블록에서 캐치되지 않는다.

2. 프로미스의 생성

앞서 설명한 콜백 헬과 에러 처리의 문제 때문에 프로미스가 도입되었다.

1) 프로미스 생성과 인수

생성 방법 : new 연산자와 함께 Promise 생성자 함수를 호출
전달 인수 : 비동기 처리를 수행할 함수 (resolve, reject)

// 프로미스 생성
const promise = new Promise((resolve, reject) => {
  // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다.
  if (/* 비동기 처리 성공 */) {
    resolve('result');
  } else { /* 비동기 처리 실패 */
    reject('failure reason');
  }
});

2) 프로미스 상태 정보

프로미스는 비동기 처리가 어떻게 진행되고 있는지를 나타내는 상태 정보를 갖는다. 프로미스의 상태는 resolve 또는 reject 함수를 호출하는 것으로 결정된다.

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

fulfilled, rejected의 두 가지 모두를 settled 상태라고 한다.

프로미스는 settled 상태가 되면 다른 상태로 변화할 수 없다.

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

세 가지가 있다.

then
catch
finally

프로미스의 비동기 처리 상태가 변화하면 후속 처리 메서드에 인수로 전달한 콜백 함수가 선택적으로 호출된다. 프로미스의 처리 결과가 메서드의 인수로 전달된다.

1) then

두 개의 콜백 함수를 인수로 전달받는다. 항상 프로미스를 반환한다.

성공 처리 콜백 함수 : fulfilled 상태가 되면 호출되는 함수
실패 처리 콜백 함수 : rejected 상태가 되면 호출되는 함수

// fulfilled
new Promise(resolve => resolve('fulfilled'))
  .then(v => console.log(v), e => console.error(e)); // fulfilled

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
  .then(v => console.log(v), e => console.error(e)); // Error: rejected

2) catch

한 개의 콜백 함수를 인수로 전달받는다. 프로미스가 rejected인 경우에만 호출되며 항상 프로미스를 반환한다.

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
  .catch(e => console.log(e)); // Error: rejected

3) finally

한 개의 콜백 함수를 인수로 전달받는다. 이 콜백 함수는 프로미스의 처리 결과와 상관없이 무조건 한 번 호출된다.

프로미스의 상태와 상관없이 공통적으로 처리해야할 내용이 있을 때 유용하다.

new Promise(() => {})
  .finally(() => console.log('finally')); // finally

예시 코드 수정

프로미스로 구현한 비동기 함수를 사용해 후속 처리 메서드를 사용하여 구현해보자.

수정 전

// GET 요청을 위한 비동기 함수
const get = url => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();

  xhr.onload = () => {
    if (xhr.status === 200) {
      // ① 서버의 응답을 반환한다.
      return JSON.parse(xhr.response);
    }
    console.error(`${xhr.status} ${xhr.statusText}`);
  };
};

// ② id가 1인 post를 취득
const response = get('https://jsonplaceholder.typicode.com/posts/1');
console.log(response); // undefined

수정 후

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 함수는 프로미스를 반환한다.
promiseGet('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => console.log(res))
  .catch(err => console.error(err))
  .finally(() => console.log('Bye!'));

angie

better than more

이전 포스트