JS중급_Promise

▶️ Promise의 용도와 기본적 사용법

  var a = new Promise();

  a.then(function(){

  }).catch(function(){

  })

• 콜백함수의 디자인 패턴이 맘에 들지 않을 경우, 다음과 같은 Promise 디자인 패턴을 이용하면 된다.
• Promise 문법으로 생성된 객체에 변수 오브젝트를 한 개 출력했는데, 프로미스 안의 코드가 실행이 완료 되었을 때 then() 함수 내의 코드를 슬행시켜준다. 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행시켜준다.
• Promise는 다음과 같은 장점이 있다.

1. 콜백함수와는 다르게 순차적으로 코드를 실행할 떄 코드가 옆으로 길어지지 않는다.
2. 콜백함수는 불가능한 '실패시 특정 코드를 실행해 주세요~'라고 코드를 짤 수 있다.

  var a = new Promise(function(resolve,reject){
  	success();
  });

  a.then(function(){
	//성공시 실행할 내용
  }).catch(function(){
	//실패시 실행할 내용
  })

• 이처럼 Promise에 콜백함수 한 개를 추가해주면 그 안에서 성공/실패 판정을 내일 수 있다.
• resolve()라고 첫째 파라미터를 함수형태로 작성하면 성공판정, reject()이라고 둘째 파라미터를 함수형태로 작성하면 실패판정이 된다. (resolve와 reject는 관습적 표현으로 이렇게 적을 필요는 없다.)

---

▶️ promise의 실사용 예시 1

var a = new Promise(function(resolve,reject){
 var hardwork = 1 + 1;
  resolve();
})

a.then(function(){
	console.log('calculation success')
}).catch(function(){

});

• Promise()안에 어려운 수학 연산을 해주는 기능을 추가했다. 그리고 그 연산이 완료되면 then 안의 코드를 실행하도록 코드를 추가했다.

  var a = new Promise(function(resolve,reject){
   var hardwork = 1 + 1;
    reject();
  })

  a.then(function(){
     
  }).catch(function(){
	 console.log('calculation failed')
  });

reject()라는 함수를 실행하면 실패판정을 내린다. 그러면 catch() 내의 코드를 실행해준다. 실패의 경우 다른 내용을 실행해줄 수 있어 그냥 콜백함수 디자인보다 훨씬 직관적이고 유용하다.

  var a = new Promise(function(resolve,reject){
   var hardwork = 1 + 1;
    resolve(hardwork);
  })

  a.then(function(outcome){
	 console.log('calculation success:' + outcome)     
  }).catch(function(){

  });

연산 결과를 활용하고 싶다면, then함수 안에서 파라미터의 형태로 결괏값을 사용하면 된다.

---

▶️ promise의 실사용 예시 2

  var a = new Promise(function(resolve,reject){
	setTimeout(function(){
        resolve();
    }, 1000)
  })

  a.then(function(outcome){
	 console.log('success')     
  }).catch(function(){
	console.log('failed')
  }).finally('good');//성공 여부에 관계없이 무조건 실행시킬 코드

setTimeout같은 함수를 순차적으로 실행시키기 위해 Promise를 활용한 예시이다.

---

▶️ promise의 몇가지 특징

/* 

성공 / 실패 판정 전 -> pending 상태
성공 후 -> fulfilled 상태
실패 후 -> rejected 상태

*/ 

  let a = new Promise(function(resolve, reject){

    setTimeout(function(){
      console.log('promise');
      console.log(a)// pending

      resolve();//성공
      reject();//실패
    })


  }, 1000);

  a.then(function(){
    console.log('resolved')//fulfilled
  }).catch(function(){
    console.log('reject')//rejected
  }).finally(function(){
    console.log('finally')//fulfilled
  })

Promise 오브젝트는 3개의 상태가 있으며, 브라우저 콘솔창에 코드를 실행시키면 오브젝트의 상태를 시점에 따라 구분할 수 있다.

  let a = new Promise(function(resolve, reject){

    setTimeout(function(){
      오래걸리는연산(); 
      console.log(a)// pending

      resolve();//성공
      reject();//실패
    })


  }, 1000);

  a.then(function(){
    console.log('resolved')//fulfilled
  }).catch(function(){
    console.log('reject')//rejected
  }).finally(function(){
    console.log('finally')//fulfilled
  })

• 만약 Promise 안에서 10초 이상의 시간이 필요한 작업이 실행된다면 10초 동안 브라우저가 멈춘다.
• 단순히 Promise를 쓴다고 해서 자동으로 동기적 처리가 비동기적 처리로 되는 것이 아니라는 것을 명심하자.(코딩을 직관적이고 깔끔하게 할 수 있는 일종의 디자인 패턴일 뿐이다.)

---

▶️ Promise chaining

// jquery 적용시
var promise1 = new Promise(function(resolve, reject) {
    $.get('https://codingapple1.github.io/hello.txt').done(function(result){
      resolve(result)
    });
});

프로미스.then(function(result) {
  console.log(result);

  var promise2 = new Promise(function(resolve, reject) {
    $.get('https://codingapple1.github.io/hello2.txt').done(function(result){
      resolve(result)
    })
  });

  return promise2;

}).then(function(result) {
    console.log(result);
})

• then은 2, 3개 이상을 연달아 붙여서 순차적으로 사용할 수 있다.
• 단 then 함수는 new Promise()로 부터 생성된 오브젝트에만 붙일 수 있다.
• 따라서 여러개의 then을 붙일 수 있게 각 then 에서 return new Promise()같은 동작을 해주면 된다. (함수를 재호출)

---

추가적인 Promise 자료는 해당 사이트의 자료를 참고해보자.

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

---