async / await

async, await은 ES8 문법으로 각각 Promise와 then을 매우 쉽게 만들어준다.

🪄 async

async 키워드를 쓰면 Promise 오브젝트가 저절로 생성된다.
따라서 귀찮게 new Promise() 어쩌구를 작성할 필요가 없다!

⚠️ 주의할 점은 이 키워드는 function 앞에만 붙일 수 있다.
그리고 성공만 판정할 수 있다는 단점이 있다.

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

더하기().then(function(){
  console.log(결과)
});

함수 더하기()를 실행하면 그 자리에 Promise 인스턴스가 남아서 바로 뒤에 then을 붙일 수 있다.

🖐🏻 await

async function 안에서만 사용할 수 있는 키워드
쉽게 말해서 프로미스.then()의 대체품이다.

어떤 function 안에서 어려운 연산을 실행한 뒤에 성공/실패를 판정해주는 Promise를 만들고 싶은 경우...

async function 더하기() {
    var 프로미스 = new Promise(function (성공, 실패) {
      var 힘든연산 = 1 + 1;
      성공(힘든연산);
    });

    // before
    프로미스.then(function () {
    console.log("성공");
    });

    // after
    var 결과 = await 프로미스;
    console.log(결과); // 2
  }

이렇게 await 키워드를 사용하면 훨씬 깔끔하게 코드를 짤 수 있다.

✨ await : 프로미스가 해결될 때까지 기다린 다음에 완료되면 결과를 변수에 담아주세요~

🥎 try & catch

await은 프로미스 실패시 에러가 뜨고 멈춘다.
➡️ 이를 방지하기 위해 try & catch 구문 사용

try {이걸 해보고 에러가 나면} catch {이걸실행해주세요}

async function 더하기() {
	var 프로미스 = new Promise(function (성공, 실패) {
    var 힘든연산 = 1 + 1;
      실패(힘든연산);
    });

    try {
      var 결과 = await 프로미스;
      console.log(결과);
    } catch {
      console.log("실패했어요");
    }
  }

✍🏻 연습 문제

Q. 버튼을 클릭하면 콘솔창에 '성공했어요'를 출력하는 Promise를 만들고 싶다고 할 때 코드를 어떻게 작성해야 할까요?

A.

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

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

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