[Javascript]async, await 사용법

Async/Await는 ES2017(ES8)에서 추가된 비동기작업을 처리하기 위한 방식중 하나입니다.

aysnc/await

async

함수에 aysnc가 붙여 선언하게 되면, 선언된 함수는 Promise를 반환하는 함수입니다.

async function Foo() {
  return '1';
}

Foo();  //  Promise {<resolved>: "1"}

await

Promise 함수와 같이 사용할 경우 결과값을 반환 할 때까지 기다리며, 반환된 값을 전달합니다.

async function Foo() {
  return '1';
}

await Foo();  // "1"

사용법

1초후에 Hello World 로그를 출력하는 Promise를 반환하는 함수를 선언하였습니다. 그리고 async함수에 Hello World 로그를 출력하는 Promise를 await구문을 사용하여 값을 가져오도록 하였습니다.

function fetchHello() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World');
    }, 1000);
  });
}

async function fooAsync() {
  const hello = await fetchHello();
  console.debug(hello);
}

fooAsync(); // 1초 후 'Hello World' 출력

또한 Promise가 여러개일 경우 경우에는 다음과 같이 사용합니다.

function fetchJs() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('fetch Js');
    }, 1000);
  });
}

function fetchCss() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('fetch Css');
    }, 1000);
  });
}

async function fetchResource() {
  console.time('fetch');
  const js = await fetchJs();
  const css = await fetchCss();
  console.timeEnd('fetch');
  console.debug(`${js} / ${css}`); // 2초 후에 fetch Js / fetch Css 메세지 출력
}

fetchResource(); 

// fetch: 2013.477ms
// fetch Js / fetch Css

fetchJs, fetchCss가 순차적으로 실행이 되는 것을 확인할 수 있습니다.
그러나 두 Promise가 병렬적으로 실행되길 원한다면, 다음과 같이 사용할 수 있습니다.

// ...
async function fetchResource() {
  console.time('fetch');
  const [ js, css ] = await Promise.all([ fetchJs(), fetchCss() ]);

  console.timeEnd('fetch');
  console.debug(`${js} / ${css}`);
}

fetchResource();

// fetch: 1009.834ms
// fetch Js / fetch Css

Promise.all을 사용하면 병렬적으로 promise를 이행한 후 배열형태로 값을 반환합니다.