Promise

함수를 순차적으로 진행하려면 콜백함수 이용하면되는데

function (){
	function(){
    	function{
        	function(){
            	....
            }
        }
    }
}

이따구로 길어지는게 보기 싫어서 Promise 쓰는거임

Promise 생김새

var 프로미스 = new Promise();

프로미스.then(function(){

}).catch(function(){

});

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

코드가 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행

Promise가 콜백함수보다 좋다고 하는 이유?

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

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

---

Promise의 정확한 뜻과 사용법

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

라는 코드를 짤 수 있게 도와주는게 바로 Promise

Promise를 를 쉽게 정의하자면 성공&실패 판정기계임

Promise 기계 안에는 아무거나 다 집어넣을 수 있음

1 + 1같은 어려운 연산이 끝나면 성공판정 내려주세요~

페이지 내의 <button>을 누르면 성공으로 판정해주세요 ~ 

Ajax 요청으로 서버의 데이터를 가져오면 성공판정, 에러나면 실패판정해주세요~ 등등

//Promise 안에서 성공 판정하는 방법
var 프로미스 = new Promise(function(성공, 실패){ // 관습적으로 (resolve,reject)사용함
  var 어려운연산 = 1 + 1;
  성공();
});

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

});

1. 이제 프로미스 내의 1+1 이라는 어려운 수학연산이 완료되면 성공() 판정을 내리고,

2. 성공시 then() 내의 코드를 실행.

//Promise 안에서 실패 판정하는 방법
var 프로미스 = new Promise(function(성공, 실패){
  var 어려운연산 = 1 + 1;
  실패();
});

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

Promise()안에 콜백함수를 하나 추가해주면 그 안에서 성공/실패 판정을 내릴 수 있음

성공()이라고 첫째 파라미터를 함수형태로 작성하면 성공판정

실패()라고 둘째 파라미터를 함수형태로 작성하면 실패판정

//연산결과같은걸 then안에서 활용하고싶으면 구멍에 쑤셔넣기
var 프로미스 = new Promise(function(성공, 실패){
  var 어려운연산 = 1 + 1;
  성공(어려운연산);
});

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

---

• 예시

//1초 대기 성공 후에 특정 코드 실행하려면?
var 프로미스 = new Promise(function(성공, 실패){
  setTimeout(function(){
    성공();
  }, 1000);
});

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

---

Promise의 특징

Promise는 3가지 상태가 있는데 

성공/실패 판정 전에는 pending

성공후엔 resolved

실패후엔 rejected 이런식으로 나옴 .  참고로 성공을 실패나 대기상태로 다시 되돌릴 수 없음

Promise는 동기를 비동기로 만들어주는 코드가 아님

Promise는 비동기적 실행과 전혀 관련이 없음;

그냥 예쁘게 보여줄 수 있는 디자인 패턴임

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

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

• 근데 Promise보다 좋은거 나왔음; async => 다음장에서 정리