ES6 Promise 사용법

 //promise 형식
var 프로미스 = new Promise(function(성공, 실패){
  성공();
});

프로미스.then(function(){

}).catch(function(){

new Promise() 문법으로 프로미스라는 변수 오브젝트를 하나 생성하시면 Promise 제작 끝입니다.

그럼 이제 프로미스라는 변수에다가 then()을 붙여서 실행가능합니다. 

 

프로미스 안의 코드가 실행이 완료가 되었을 때 then() 함수 내의 코드를 실행시켜줍니다. 

코드가 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행시켜줍니다. 

(지금은 프로미스 안에 코드가 암것도 없지만요)

 

이런 식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise입니다. 

 

Promise가 콜백함수보다 좋다고 하는 이유는 두개가 있습니다. 

1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할 때 코드가 옆으로 길어지지 않습니다. then 함수를 붙여서 순차적으로 실행하니까요.

2. 콜백함수는 불가능한 '실패시 특정 코드를 실행해주세요~' 라고 코드를 짤 수 있습니다. (catch)

 

 

 

Promise의 정확한 뜻과 사용법

 

성공하면 then(), 실패하면 catch()를 실행해주세요~

라는 코드를 짤 수 있게 도와주는게 바로 Promise입니다. 

그럼 Promise는 성공과 실패 상황을 알려줘야겠죠?

그래서 Promise를 를 쉽게 정의하자면 성공&실패 판정기계입니다.

 

 

 

예시1. 힘든 수학연산 성공 / 실패 후에 특정 코드를 실행하려면?

var 프로미스 = new Promise(function(성공, 실패){
  var 어려운연산 = 1 + 1;
  실패();
});

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

실패()라는 함수를 실행하는 순간 실패판정을 내립니다.

그렇게 되면 catch() 내의 코드를 실행해줍니다. 

실패의 경우 다른 내용을 실행해줄 수도 있고하니 그냥 콜백함수 디자인보다 훨씬 뭔가 직관적이고 유용합니다.

 

 

 

예시2. 1초 대기 성공 후에 특정 코드를 실행하려면?

var 프로미스 = new Promise(function(성공, 실패){
  setTimeout(function(){
    성공();
  }, 1000);
});

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

 

Promise의 몇가지 특징

 

1. 일단 new Promise()로 생성된 변수를 콘솔창에 출력해보시면 현재 상태를 알 수 있습니다.

성공/실패 판정 전에는 <pending> 이라고 나오며

성공 후엔  <resolved>

실패 후엔 <rejected> 이런 식으로 나옵니다.

이렇게 프로미스 오브젝트들은 3개 상태가 있습니다.

그리고 성공을 실패나 대기상태로 다시 되돌릴 순 없습니다. 참고로 알아둡시다. 

 

 

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

Promise는 비동기적 실행과 전혀 상관이 없습니다.

그냥 코딩을 예쁘게 할 수 있는 일종의 디자인 패턴입니다.

예를 들면.. Promise 안에 10초 걸리는 어려운 연산을 시키면 10초동안 브라우저가 멈춥니다.

10초 걸리는 연산을 해결될 때 까지 대기실에 제껴두고 그런거 아닙니다. 

 

 

참조:코딩애플