Promise

Promise는 순차적 실행을 위해 콜백함수 대신 쓸 수 있는 디자인패턴이다.
콜백함수와 유사한데 더 기능이 많다.

💗 Promise가 콜백함수보다 좋은 이유

1. then 함수를 붙여서 순타적으로 실행하기 때문에 코드가 옆으로 길어지지 않는다.
2. catch를 사용해서 콜백함수는 불가능한 '실패시 특정 코드를 실행해주세요~' 라고 코드를 짤 수 있다.

🤙🏻 Promise의 뜻과 사용법

Promise는 성공하면 then(), 실패하면 catch()를 실행해주세요~ 라는 코드를 짤 수 있게 도와준다.

✨ Promise는 쉽게 말해서 성공&실패 판정 기계다.

var 프로미스 = new Promise();

프로미스.then(function(){
  // 프로미스가 성공일 경우 실행할 코드
}).catch(function(){
  // 프로미스가 실패일 경우 실행할 코드
});

Promise 안에서 성공/실패를 판정하는 방법

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

프로미스.then(function(){

}).catch(function(){

});

• Promise()안에 콜백함수를 하나 추가하면 그 안에서 성공/실패 판정을 내릴 수 있다.
  • 성공()이라고 첫째 파라미터를 함수형태로 작성하면 성공판정이 된다.
  • 실패()라고 둘째 파라미터를 함수형태로 작성하면 실패판정이 된다.

위의 코드는 무조건 성공()을 실행하게 되어있으니 무조건 성공을 판정내리고 그 후엔 then()안의 코드가 실행된다.

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

• 1 + 1같은 어려운 연산이 끝나면 성공판정 내려주세요~
• 페이지 내의 button을 누르면 성공으로 판정해주세요 ~
• Ajax 요청으로 서버의 데이터를 가져오면 성공판정, 에러나면 실패판정해주세요~

📓 Promise 사용 예시

예시1. 힘든 수학연산 성공 후에 특정 코드를 실행하는 경우

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

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

});

1. 프로미스 내의 1+1 이라는 어려운 수학연산이 완료되면 성공() 판정을 내린다.
2. 성공시 then() 내의 코드를 실행해준다.

연산결과같은걸 then 안에서 활용하고 싶으면...

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

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

성공(); 함수 파라미터에 연산결과를 넣어주면 된다.

예시2. 1초 대기 성공 후에 특정 코드를 실행하는 경우

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

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

🚥 Promise의 3가지 상태

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

• 성공/실패 판정 전에는 <pending>
• 성공 후엔 <resolved>
• 실패 후엔 <rejected>

✍🏻 연습 문제

Q. 이미지 로딩 성공기 콘솔창에 성공, 로드가 실패하면 콘솔창에 실패를 출력하도록 코드를 작성해주세요.

<img id="test" src="https://codingapple1.github.io/kona.jpg"> 

A.

<img id="test" src="https://codingapple1.github.io/kona.jpg" />
<script type="module">
  var 이미지로딩 = new Promise(function (성공, 실패) {
    var img = document.querySelector("#test");
    img.addEventListener("load", function () {
      성공();
    });
    img.addEventListener("error", function () {
      실패();
    });
  });

  이미지로딩
    .then(function () {
      console.log("성공");
    })
    .catch(function () {
      console.log("실패");
    });
</script>

Q. Promise Chaining
1. hello.txt GET 요청
2. 그게 완료되면 hello2.txt GET 요청
3. 그게 완료되면 hello2.txt 결과를 콘솔창에 출력

A.

<script src="https://code.jquery.com/jquery-3.4.1.min.js">
  var 프로미스1 = new Promise(function (성공, 실패) {
    $.get('https://codingapple1.github.io/hello.txt').done(function(res){
      성공(res);
    })
  });

  프로미스1
    .then(function (res) {
      console.log(res)

      var 프로미스2 = new Promise(function(성공, 실패){
        $.get('https://codingapple1.github.io/hello2.txt').done(function(res){
          성공(res);
        })
      })

      return 프로미스2

    }).then(function(res){
      console.log(res)
    })
</script>