[Javascript] Async / Await

phoenix·2021년 12월 4일
0

https://www.youtube.com/watch?v=V_Kr9OSfDeU

  • Promise보다 더 쉽게 쓸 수 있는 ES8 문법
  • aysnc라는 키워드를 함수 선언 앞에다 써주면 new Promise()오브젝트가 저절로 생성 된다.
async function addNumber(){
	2 + 2
}
//이렇게 하면 new Promise()오브젝트가 생성
//이 함수 function addNumber 자체가 Promise가 됐다.
//따라서 이 함수는 .then() 사용 가능.

async function addNumber(){
  2 + 2
}

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

//----------------
async function addNumber(){
  return 1 + 1 
}

addNumber().then(function(결과){
  console.log(결과)
});

//함수안에서 연산된 결과를 사용하고 싶으면 이렇게 써주면 된다.
  • then()의 지옥에서 벗어나기 위해 await키워드가 생겼다.
    • async를 쓴 함수 안에서는 await이 사용 가능하다
    //기존에 await대신 then으로 하던 패턴
    
    async function addNumber(){
      var 어려운연산 = new Promise((성공, 실패)=>{
        var 결과 = 1 + 1;
        성공();
      });
      어려운연산.then();
    }
    addNumber();
    
    //----------------------------
    //await 키워드 사용하는 패턴
    async function addNumber(){
      var 어려운연산 = new Promise((성공, 실패)=>{
        var 결과 = 1 + 1;
        성공();
      });
      var 결과 = await 어려운연산;
    }
    addNumber();
    
    //---------------------------------
    
    //연산결과를 출력할때
    
    async function addNumber(){
      var 어려운연산 = new Promise((성공, 실패)=>{
        var 결과 = 1 + 1;
        성공(결과);
      });
      var 결과 = await 어려운연산;
      console.log(결과);
    }
    addNumber();
    
    //성공()함수 안에 있던 2 파라미터는 var 결과라는 변수에 저장이 된다.
    
- await은 실패하면 에러가 나고 코드가 멈춘다
   async function addNumber(){
     var 어려운연산 = new Promise((성공, 실패)=>{
       실패();
     });
     var 결과 = await 어려운연산;
     console.log(결과);
   }
   addNumber();
   
   //어려운연산 Promise가 실패를 하면 await 어려운연산이라는 코드에서 에러가 나고
   //await 하단에 있는 코드들은 실행이 되지 않는다.
   
   //--------------------------
   //Promise가 실패할 경우에도 코드를 멈추지 않고 실행하고 싶을때에는
   //try {}, catch {}를 쓴다
   
   async function 더하기(){
     var 어려운연산 = new Promise((성공, 실패)=>{
       실패();
     });
     try {  var 결과 = await 어려운연산 }
     catch { 어려운연산 Promise가 실패할 경우 실행할 코드 }
   }
profile
phoenix

0개의 댓글