[ECMAScript6 / ES6] Promise

< Promise 란? >

- 프로미스는 비동기 작업을 편하게 처리할 수 있도록 도입된 ES6 기능이다.

- 비동기 작업을 순차적으로 진행하거나 병렬로 진행할 수 있다.

- 반환 값은 항상 promise 객체이다.

- 비동기작업이 많아짐에 따라서 콜백 지옥이 발생하게 되는데 이것을 프로미스가 해소해준다.

 

const increaseAndPrint = (n, callback) => {
  setTimeout(() => {
    const increased = n + 1;
    console.log(increased);
    if (callback) {
      callback(increased);
    }
  }, 1000);
};
 
increaseAndPrint(0, n => {
  increaseAndPrint(n, n => {
    increaseAndPrint(n, n => {
      increaseAndPrint(n, n => {
        increaseAndPrint(n, n => {
          console.log("끝!");
        });
      });
    });
  });
}); 

위와 같이 콜백 지옥이 발생한다.

function increaseAndPrint(n) {
  return new Promise(resolve => {
    setTimeout(() => {
      const value = n + 1;
      console.log(value);
      resolve(value);
    }, 1000);
  });
}
 
increaseAndPrint(0)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint);

 프로미스를 이용하면 코드의 깊이가 깊어지는 현상을 방지할 수 있다.

 

 

< Promise 기초>

const myPromise = val => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (val) {
        resolve("성공");
      } else {
        reject("실패");
      }
    }, 1000);
  });
};
 
myPromise(true)
  .then(text => console.log(text)) //성공
  .catch(error => console.log(error));

Promise 는 파라미터로 실행 결과를 전달할 resolve 함수와 reject 함수를 가지고 있다.

특정 조건에 참이냐 거짓이냐에 때라 resolve 를 호출하면 되고, 거짓일 경우 reject를 호출하면 된다.

각각의 함수는 모든 작업이 완료된 뒤에 해당 값을 반환한다.

 

14행 → Promise 뒤에 then 함수를 이용하여 참일 경우에 반환된 값을 사용할 수 있다.

15행 → Promise 가 reject 를 반환했을 경우 catch 를 통하여 작업을 수행할 수 있다.

 

< Promise 의 상태 >

프로미스의 처리 과정 중 하나로, 다음과 같은 과정 중 한 가지 상태를 가진다.

 

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

---

대기 (pending)

new Promise((resolve, reject) => {
  //
});

new Promise()를 호출하면 대기 상태가 된다.

콜백 함수의 인자로 resolve, reject 가 있다.

아직 수행 중인 상태이므로 resolve, reject 되기 전 상태이다.

 

 

이행 (fulfilled)

new Promise((resolve, reject) => {
  resolve();
});

콜백 함수의 인자인 resolve 가 실행 완료된 상태이다.

 

 

거부 (rejected)

new Promise((resolve, reject) => {
  reject();
});

콜백 함수의 인자인 reject 가 실행 완료 된 상태이다.

 

 

 

 

 

[참고]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/