[JS ES6]-[20] 동기, 비동기 핵심만 이해하기(4) - async/await

 

안녕하세요

이번 글에서는 자바스크립트에서의  async/await - (동기, 비동기) 핵심만 알려드리겠습니다.

 

1. 사용이유

Promise 대신 코드를 동기적으로 짜고 싶을 때 사용하시면 됩니다.

 

2. async

async키워드를 함수앞에 붙이면, 함수 자체가 Promise가 됩니다.

함수가 promise로 바꼇기에, 함수에 then을 붙일 수 있습니다.

 

 

그리고 귀찮게 Promise 생성할 때 마다 new Promise를 해 줄 필요도 없어집니다.

async function say_hi () {
  console.log('hi');
}

say_hi().then(function() {
  console.log('성공');
})

 

return을 통해 값을 then안으로 넣어줄 수 있습니다.

async function say_hi ()  {
  return 'hi';
}

say_hi().then(function(result) {
  console.log(result);  //hi
})

 

 

3. await

await은 async함수 안에서 사용할 수 있습니다.

 

await은 then() 과 기능은 비슷하지만 코드가 훨씬 간단합니다.

then은 Promise를 기다린 다음에 완료되면 코드를 실행하는 건 기억하고 계시죠?

 

먼저 then을 이용해서, Promise를 처리해 보겠습니다.

async function calculation_async() {

  const calculate_num = new Promise((resolve, reject) => {
      const result = 1 + 1;  //비동기 함수인걸로 가정
      resolve(result);
  });

  calculate.then((result) => {
      console.log(result);  //2
  });
}

calculation_async();

 

then을 쓰니 코드가 너무 긴 느낌입니다.

이번엔 awiat을 사용해서 코드를 보여드리겠습니다.

async function calculation_async() {

  const calculate_num = new Promise((resolve, reject) => {
      const result = 1 + 1;  //비동기 함수인걸로 가정
      resolve(result);
  });

  const result = await calculate_num;  //2
}

calculation_async();

훨씬 간단해 보이네요!

 

4. await의 에러처리

await이 실패하게 되면 코드가 멈추게 됩니다.

그래서 실패했을때 예외처리를 해줘야 하는데요.

try-catch를 이용해서 하면 됩니다.

 

async function get_data() {

try{
      const user = await fetch_user();
      const name = await fetch_name();
  } catch(error){
      console.log(error);
  }

}

이렇게 하면 try안에서 하나라도 에러가 나올 시 error객체에 담기기 때문에,

에러에 유형에 맞게 코드를 처리할 수 있습니다.