async, await

async, await

해당 문법은 Promise 를 보다 간결하게 사용하기 위한 문법으로 ES8 기준 언어 입니다.

async

async 는 함수 앞에 붙고 async function 의 함수들은 Promise 를 반환합니다. (Promise 가 붙지 않아도 자동으로 Promise 로 감싸져 반환됩니다.)

await

async 가 붙은 함수 안에서 사용하고, 비동기로 처리되는 함수 앞에 await 함수를 붙여 사용합니다.
await 가 끝나면 해당 값만을 받아 사용할 수 있음으로, Prmoise 의 지옥콜백을 어느정도 벗어날 수 있다.

예시

아래는 Promise 형식으로 된 예제입니다.

function promise (v) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(v), 30);
  });
}

function First(){
  return promise("First");
}

function Second(){
  return promise("Second");
}

function getString(){
  First()
  .then((a) => {
    console.log(a);
    Second()
    .then((b) => {
      console.log(b);
    })
  })
}

getString(); // First, Second 라는 값 유출

확인해보시면, 프라미스 => 콜백 => 프라미스 호출 => 콜백 이런 식으로 점점 코드 구조가 깊어지는 현상을 볼 수 있습니다.
이 부분을 async, await 를 활용해서 변경해봅시다.

function promise (v) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(v), 30);
  });
}

async function First(){
  return await promise("First");
}

async function Second(){
  return await promise("Second");
}

async function getString(){
    const f = await First();
    const s = await Second();

    console.log(f, s);
}

getString(); 

이렇게 await 를 썼더니 위의 Promise 사용법에서 많이 코드가 최적화 된 것을 확인할 수 있다.