[javascript 자바스크립트] async/await 란?

 

 

저번 게시물에서는 자바스크립트 난제였던 콜백 지옥을 해결한 프로미스(Promise)에 대해서 알아보았다.

이번 시간에는 자바스크립트의 비동기 처리과정에서 사용되는 async/await 기능에 대해서 알아보려고 한다.

 

async / await 란?

 

먼저 async / await 란 비동기 처리 패턴 중 하나이다.

비동기 처리 패턴 중에서 프로미스가 콜백 지옥을 해결했다지만 여전히 코드가 길어서 읽기 좋은 코드라고 할 수는 없다.

then과 catch가 계속 반복되기 때문이다. async / await 문법은 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄일 수 있다.

 

async / await 기본 문법

 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

먼저 함수의 앞에 async라는 예약어를 붙여준다. 그러고 나서 함수의 내부 로직 중 HTTP통신을 하는 비동기 처리 코드 앞에 await를 붙인다. 여기서 주의해야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 정상적으로 동작한다.

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수 등이 있다.

 

 

아래는 저번에 프로미스(Promise)를 설명할 때 사용했던 코드이다.

 

function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'steady';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .then((user) => {
      // 생략
    })
    .catch(err => {
      console.error(err);
    });
}

 

위에 코드를 async / await 문법을 사용해서 아래와 같이 바꿀 수 있다.

 

async function findAndSaveUser(Users) {
  try {
    let user = await Users.findOne({});
    user.name = 'steady';
    user = await user.save();
    user = await Users.findOne({ gender: 'm' });
    // 생략
  } catch (error) {
    console.error(error);
  }
}

 

• 먼저 async function이 앞에 추가되었다. 그리고 프로미스(Promise) 앞에 await을 붙였다.
• 이제 함수는 해당 await 뒤에 있는 프로미스가 resolve(실행)될 때까지 기다린 뒤, 실행이 되면 다음 로직으로 넘어가게 된다.
• 예를 들면 await Users.findOne({}) 이 resolve 될 때까지 기다린 후 user변수를 초기화한다.

 

async / await에서 예외를 처리하는 방법은 try / catch 문을 사용하면 된다.

프로미스(Promise)에서. catch()를 사용해서 예외 처리를 했던 것처럼 async에서는 catch {}를 사용하면 된다.