[JavaScript]Promise 와 async/await

Promise

성공하면 then(), 실패하면 catch()를 실행

 

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

성공/실패 판정 전에는 <pending> 

성공 후엔  <resolved>

실패 후엔 <rejected> 

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

그리고 성공을 실패나 대기상태로 다시 되돌릴 순 없음

 

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

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

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

 

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

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

});

---

case)

Q1. <img> 이미지 로딩 성공시 특정 코드를 실행하고 싶습니다. Promise 문법의 then, catch 함수를 사용해 만들고 싶습니다. 어떻게 코드를 짜면 될까요?

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

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('실패했어요')
})

 

Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다. 

https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 하면 인삿말이 하나 딸려옵니다.

여기로 GET 요청을 해서 성공하면

Promise의 then 함수를 이용해서 Ajax로 받아온 인삿말을 콘솔창에 출력해주고 싶습니다.

어떻게 하면 될까요? 

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

프로미스.then(function(결과) {
  console.log(결과);
})

 

 

---

 

Async, await

Promise와 then을 매우 쉽게 만들어주는 문법

async function 어려운연산 (){
  1 + 1 
}

 

함수 자체가 Promise가 되어 실행할때 뒤에 then을 붙일수 있음.

async function 더하기(){
  1 + 1 
}

더하기().then(function(){
  console.log('더하기 성공했어요')
});

 

await : 프로미스.then() 대체품

async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    실패();
  });
  try {  var 결과 = await 어려운연산 }
  catch { 어려운연산 Promise가 실패할 경우 실행할 코드 }
}

---

case)

Q. <button>을 누르면 성공하는 Promise 만드려면?

<button id="test">버튼</button>

<script>
  var 프로미스 = new Promise(function(성공, 실패){
      document.getElementById('test').addEventListener('click', function(){
        성공();
      });
  })
  async function 버튼누르기(){
    var 결과 = await 프로미스;
    console.log('성공했으요')
  }

  버튼누르기();
</script>