[JavaScript] Async/Await

안녕하세요, 오늘은 프로미스를 더 간략하게 하는 async/await에 대해서 알아보겠습니다.

 

    프로미스는 콜백헬을 없앨 수 있지만 .then을 계속해서 써야하기 때문에 보이는게 그리 단순해보이지 않을 수 있습니다. 코드를 더 간편하게 보이도록 하기 위해서 나타난 것이 async/await입니다.

---

1. async

    async 키워드는 function 앞에 위치합니다. async function 함수는 항상 프로미스를 반환합니다. 프로미스가 아닌 값을 반환하더라도 resolve 값을 해당 반환값으로 만들어서 프로미스가 반환되도록 합니다. 

//프로미스가 아닌 정수형 반환
async function func1(){
  return 1;
}

//명시적으로 프로미스 반환
async function func2(){
  return Promise.resolve(1);
}

//결과
func1().then(alert); //1
func2().then(alert); //1

---

    

2. await

    await은 async 함수 안에서만 작동합니다. 프로미스가 await을 만날 경우 async 함수에서 await 다음 코드 실행을 프로미스를 처리할때까지 기다립니다.

    await 앞에 변수를 선언할 수 있습니다. 이때 변수에는 프로미스가 끝날때의 프로미스 반환 값(resolve값)이 들어갑니다.

async function func(){
  let promise=new Promise((resolve,reject)=>{
    setTimeout(()=>resolve("성공"),1000)
  });
  
  let res=await promise; //프로미스가 이행될 때까지 기다림
  
  console.log(res); //성공
}

func();

---

 

3. 예제 (Timer) : 프로미스 -> async/await

    프로미스로 짜여진 타이머 코드 예제를 asyn/await으로 바꿔보도록 하겠습니다.

function timer(time){
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve(time);
    }, time);
  });
}

//프로미스
timer(1000).then((time)=>{
  console.log('time : '+time);
  return timer(time+1000);
}).then((time)=>{
  console.log('time : '+time);
  return timer(time+1000);
}).then((time)=>{
  console.log('time : '+time);
});

//async await
async function func1(){
  let time=await timer(1000);
  console.log('time : '+time);
  
  time=await timer(1000+time);
  console.log('time : '+time);
  
  time=await timer(1000+time);
  console.log('time : '+time);
}

---

4. 에러처리

    async,await은 에러처리 하는 부분이 따로 없으므로 try와 catch를 활용해서 에러처리를 합니다. 

function timer(time){
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve(time);
    }, time);
  });
}

//에러 처리
async function func1(){
  try{
      let time=await timer(1000);
      console.log('time : '+time);

      time=await timer(1000+time);
      console.log('time : '+time);

      time=await timer(1000+time);
      console.log('time : '+time);
  }
  catch(err){
      console.log(err);
  }
}

---

5. for문과 화살표 함수 응용

    async함수를 사용할때 화살표 함수로 사용할 수 있습니다. 또한 for await of 문을 사용해서 프로미스 배열을 순회할 수 있습니다. async 함수의 반환값은 항상 promise로 감싸지기 때문에, 실행 후 then을 붙이거나, 또 다른 async 함수 안에서 await을 붙여서 처리할 수 있습니다.

const p1=Promise.resolve('p1');
const p2=Promise.resolve('p2');

(async()=>{
  for await (promise of [p1,p2]){
    console.log(promise);
  }
}) ();

---

이상으로 코드를 간결하게 해주는 async/await에 대해서 알아봤습니다. 감사합니다.