[JavaScript] Promise

Promise

Promise는 비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다.

Callback Hell 때문에 ES6에서 도입한 또 다른 비동기 처리 패턴이다.

 

Promise 생성

• Promise는 new Promise()로 생성한다.
• 비동기 작업을 수행할 Callback 함수를 인자로 전달받아서 사용한다.
• new Promise에 전달되는 함수는 executor(실행자 혹은 실행함수)라고 부른다.
  executor는 new Promise가 만들어질 때 자동으로 실행된다.
• 인자로는 resolve와 reject를 받는다(resolve와 reject는 자바스크립트에서 자체 제공하는 Callback이다).
  대신 executor에서 비동기 작업이 끝나면 바로 두 가지 Callback 중 하나를 실행한다.
• resolve는 작업이 성공한 경우 호출할 Callback이다.
  resolve(성공리턴값)은 then으로 연결된다.
• reject는 작업이 실패한 경우 호출할 Callback이다.
  reject(실패리턴값)은 catch로 연결된다.

const condition = true;

const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve("성공!");
  } else {
    reject("실패!");
  }
});

promise
  .then((msg) => {
    console.log(msg);  // 성공
  })
  .catch((error) => {
    console.error(error);
  });

 

Promise Chaining 

Promise는 후속 처리 메서드를 체이닝해서 여러 개의 Promise를 연결할 수 있다. (이걸로 Callback Hell을 해결할 수 있다.)

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result);
    return result + 1;
  })
  .then((result) => {
    console.log(result);
    return result + 1;
  })
  .then((result) => {
    console.log(result);
    return result + 1;
  });

위의 코드는 아래와 같은 순서대로 실행된다.

1. 1초 후 Promise가 실행된다. 
2. 이후 첫 번째 then이 호출된다. 첫 번째 then의 리턴값을 두 번째 then에 전달하고
3. 두 번째 리턴값을 세 번째 then으로 전달한다.
4. 이런 과정이 계속 반복된다.

결과적으로 콘솔에는 1, 2, 3이 순서대로 출력된다.