모던 JS 토크 async function

Source: Dev.to

Overview

async 함수는 Async Function 객체를 반환합니다. async와 await 키워드를 사용하면, 원시 Promise를 사용할 때보다 비동기 처리를 더 간결하게 작성할 수 있습니다. 이 기능은 ES2017에서 표준화되었습니다.

Basic Usage

함수 정의 앞에 async 키워드를 추가합니다. 함수가 Promise가 아닌 값을 반환하면 자동으로 해결된 Promise로 감싸집니다.

async function asyncFunc() {
  return 'Amazing!';
}

asyncFunc().then(result => {
  console.log(result); // "Amazing!"
});

Returning Values with Parameters

인자를 활용한 값을 반환할 수 있으며, 이 역시 Promise로 감싸집니다.

async function asyncFuncB(text) {
  return 'Amazing!' + text;
}

asyncFuncB('Indeed!').then(result => {
  console.log(result); // "Amazing!Indeed!"
});

Returning Promises Directly

async 함수는 명시적인 Promise를 반환할 수도 있습니다.

async function asyncFuncC() {
  return new Promise((resolve, reject) => {
    resolve('Wonderful!');
  });
}

asyncFuncC().then(result => {
  console.log(result); // "Wonderful!"
});

같은 로직을 더 간결하게 표현할 수 있습니다:

async function asyncFuncC() {
  return Promise.resolve('Wonderful!');
}

asyncFuncC().then(result => {
  console.log(result); // "Wonderful!"
});

Using await

async 함수 내부에서 await 연산자는 해당 Promise가 해결될 때까지 실행을 일시 중지시켜, 명시적인 .then() 체인 없이 코드를 작성할 수 있게 합니다.

async function awaitFunc() {
  return 'Wonderful!';
}

async function asyncFuncD() {
  const result = await awaitFunc();
  console.log(result); // "Wonderful!"
}

asyncFuncD();

Further Reading

• MDN – async function