js - Promise

이번 포스트에서는 Promise에 대해서 알아보겠습니다.

 

이번 글은 아래의 글과 연관되는 부분이 있습니다.

https://jhhan009.tistory.com/125

동기, 비동기 처리 & 콜백함수

 

Promise는 디자인 패턴으로

callback 함수를 사용하는데 있어 불편함을 느낀다면

사용할 수 있는 대체제 입니다.

 

먼저 Promise의 간략한 사용법을 알아보죠

let pm1 = new Promise();

pm1.then(function() {

}).catch(function() {

}).finally(function() {

});

• new Promise라는 object 변수를 만들면 됩니다.
• then을 통해서 코드의 실행이 완료된 이후의 내용을 적습니다.
• catch를 통해서 코드의 실행에 실패했을 때의 내용을 적습니다.
• finally를 통해서 코드의 실행이 끝난 후(성공 실패와 무관)의 내용을 적습니다.

 

아주 간단한 편입니다.

 

그럼 조금 더 그럴 듯한 예시를 보겠습니다.

 

예시1. 연산 후

let pm1 = new Promise(function(resolve, reject){
  let math1 = 1 + 1;
  resolve();
  // reject();
});

pm1.then(function(){
  console.log('연산이 성공했습니다');
}).catch(function(){
  console.log('연산이 실패했습니다');
});

resolve는 코드가 성공했을 때 실행하고, reject는 코드가 실패했을 때 실행합니다.

(보통 resolve, reject를 많이 사용합니다.)

연산에 성공했다면 resolve()를 부르고, 연산에 실패했다면 reject()를 부르면 됩니다.

 

만약 연산의 결과가 넘어가는 것을 원한다면 다음과 같이 합니다.

let pm1 = new Promise(function(resolve, reject){
  let math1 = 1 + 1;
  resolve(math1);
  // reject(math1);
});

pm1.then(function(r) {
  console.log('연산이 성공했습니다', r);
}).catch(function(r) {
  console.log('연산이 실패했습니다', r);
});

괄호 안에 결과값을 넣어주면 넘어가게 됩니다.

그리고 출력하면 아까 계산했던 값이 보일 것입니다.

 

예시2. 시간이 걸리는 코드 수행 후

setTimeout 처럼 시간이 걸리는 함수를 수행해보는 코드입니다.

let pm2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve();
    // reject();
  }, 1000);
});

pm2.then(function() {
  console.log('1초 대기 성공했습니다')
}).catch(function() {
  console.log('실패했습니다')
});

실행해보면, 1초 후 해당 로그가 찍히는 것을 확인할 수 있습니다.

이런 것을 보니 비동기 함수의 실행 후 Promise로 진행하면

훨씬 수월하게 코딩을 할 수 있습니다.( 제 생각은 그렇습니다. )

 

 

이렇게 Promise에 대해서 알아봤으니

Promise에 대한 특징도 몇가지 알아보겠습니다.

 

1. Promise에는 현재 상태를 알 수 있는 상태값이 있습니다.

1. pending(대기): 코드가 실행되기 전의 상태 
2. fulfilled(이행): 코드가 완료된 상태
3. rejected(실패): 코드가 실패하거나 오류가 난 상태

이렇게 3가지가 있으며, 이 상태들은 콘솔 로그 창에 찍어보면 확인할 수 있습니다.

그리고 이행 상태가 되면 대기나 실패 상태로 되돌릴 수 없습니다.

 

2. Promise는 비동기를 만들어주는 코드는 아니다.

코드가 마치 비동기 코드처럼 보이는 것이지, Promise 자체는 비동기가 아닙니다.

Promise 안에 시간이 오래 걸리는 연산을 실행한다면

그 시간만큼 코드는 거기에서 멈춰있을 것입니다.

setTimeout이나 ajax를 통해서 비동기 코드처럼 동작하게 하는 것입니다.

Promise는 디자인 패턴입니다.

 

 

 

이렇게 간략하게 Promise에 대해서 알아봤습니다.

물론 이 정도의 설명은 Promise에 대해서 알기 쉽게 설명한 것으로

이 정도의 지식만으로 실전에서 쓰기에는 무리가 있을 수도 있습니다.

 

 

다음 포스트에서는 async, await를 작성할 것 같습니다.

이것으로 이번 포스트를 마칩니다.

 

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법