Promise가 어렵다면 그보다 훨씬 쉽게 쓸 수 있는 ES8 async / await 알아봅시당
Promise와 then을 매우 쉽게 만들어주는 문법입니다!

async 키워드 👉 Promise 오브젝트생성

함수 선언 앞에다가만 붙일수 있는 async
async를 함수앞에다가 붙이면 함수 실행 후 promise 오브젝트가 남습니다.
그래서 .then( ) 을 쓸수있음.

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

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

//2 

await

async function 안에서만 쓰이는 await

async 키워드를 쓴 함수 안에서는 await을 사용가능합니다.
await은 그냥 프로미스.then() 대체품으로 생각하시면 됩니다.
하지만 then보다 훨씬 문법이 간단합니다.

함수 안에서 promise를 써봅시다

async function 더하기(){
  var 프로미스 = new Promise((resolve, reject)=>{
    var 결과 = 1 + 1;
    resolve();
  });
  
  프로미스.then(function(){
  	console.log('성공함')
  });
}


더하기();

원래 이러한 코드를
await는 이렇게 바꿀수있다.
👇👇👇👇👇👇👇👇👇👇👇👇👇

async function 더하기(){
  var 프로미스 = new Promise((resolve, reject)=>{
    var 연산 = 1 + 1;
    resolve(연산);
  });
  
 try{
  var 결과 = await 프로미스; //프로미스가 해결되기까지 기다려주라.
  console.log(결과) //2 
  //resolve안에 담아진 것을 출력해줌.
   
 } catch{
 	console.log('프로미스 연산 잘 안됨 ㅠㅠ')
 }
}


더하기();

예제 : <button>을 누르면 성공하는 Promise 만들기

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

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

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