async 함수 안에서 쓰는 await

async / await

 

async / await 는 프로미스 대신 요긴하게 쓸수 있다

async 를 function 앞에 붙이면 함수 실행후에 Promise 오브젝트가 남습니다

같이 쓰이는 await는 프로미스가 성공할때까지 기다려주며, 항상 async 함수 안에서만 씁니다

async function 더하기(){ 
 //new Promise()어쩌구~ 디자인 안해도 'async'를 함수 앞에 붙이면 함수가 프로미스기능
  return 1+1;
}

더하기().then(function(결과){ //.then()사용가능! 왜? async 함수가 있으면 프로미스를 뱉어내니까
 console.log(결과)
})

// async 는 성공만 판정가능
//return Promise.reject() 실패판정하면, 에러를 일으킴

async 안에서 쓰는 await!

//함수 안에서 프로미스 디자인 하기
async function 더하기(){

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

  // async function 안에서 쓰는 await, then() 대신에 활용가능
  var 결과 = await 프로미스; // 프로미스가 해결되길 기다려주셈~
  console.log(결과);

  /*
  위에랑 같은 코드
  프로미스.then(function(){ //프로미스 내의 연산이 성공하면 이 코드를 실행시켜주세요~
    console.log('성공했어요')
  });
  */
}

 

 

만약 프로미스가 실패판정이 나면 어떻게 할까?

async function 더하기(){

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

// async function 안에서 쓰는 await, then() 대신에 활용가능
var 결과 = await 프로미스; // 여기서 에러남! await은 프로미스 실패시 에러나고 멈춤
console.log(결과);
}

 

 

실패판정에 대처하는법? try{} catch{}

async function 더하기(){

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

//try{ 이걸해보고에러나면 } catch{이걸실행해주세요}
try{var 결과 = await 프로미스; 
console.log(결과);
}catch{
  console.log('프로미스 연산이 잘안되었군요') //실패판정 후, try에서 프로미스 에러, 다음인 catch 실행
}
}

 

 

 

 

 

예제

Q.<button>을 누르면 성공판정하는 promise 디자인해보자. 성공시 '성공했어요'를 출력하려면?

<button id = 'button'>지은이</button>

<script>
async function 더하기(){
  var 프로미스 = new Promise(function(성공,실패){
  document.getElementById('button').addEventListener('click',function(){
    성공('성공했어요');//성공판정시 '성공했어요' 인자로 전달
  })
  });

  var 결과 = await 프로미스; //프로미스 성공까지 기달
  console.log(결과); //인자 전달받음
}

더하기(); //더하기 함수 호출

</script>