자바스크립트 async-await

오늘은 자바스크립트 async-await에 대해 알아보도록 하겠습니다.

 

1. 자바스크립트 async 함수

async 함수는 비동기 함수로 이벤트 루프를 통해 작동합니다.

promise를 사용하여 결과를 반환합니다.

비동기에 대해 이해가 안 가는 분들을 위해 설명을 해드리면

비동기는 쉽게 말해 프로그램의 진행이 병렬로 갈라지는 것입니다.

동기는 순서대로 하나하나 진행되지만 비동기는 중간에 2개 혹은 그이 상의 길로 갈라질 수 있습니다.

 

문법은 간단합니다.

function에 앞에 async가 붙으면 됩니다.

async function asyncf() {

}

 

2. 자바스크립트 async await

자바스크립트의 비동기 처리 패턴 중 하나로 콜백 함수와 프로미스의 단점을 보완하여 개발자가 읽기 좋은 코드를 작성할 수 있도록 돕습니다.

예제를 통해 알아보도록 하겠습니다.

function a() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('aaaa');
    }, 2000);
  });
}

async function t() {
  console.log('b');
  const c = a();
  console.log(c);
}

t();

함수 a는 promise 객체를 시간이 2초의 시간이 지나면 return 해줍니다.

함수 t는 a의 반환 값을 c에 담아주고 이것을 출력해줍니다.

이것을 그냥 진행하면

> "b" > [object Promise]

다음과 같은 출력이 나옵니다.

비동기 함수이기 때문에 c에 함수 a의 반환 값이 입력되기 전에 c가 출력되기 때문에 aaaa가 출력되지 않는 것입니다.

 

function a() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('aaaa');
    }, 2000);
  });
}

async function t() {
  console.log('b');
  const c = await a();
  console.log(c);
}

t();

> "b" > "aaaa"

다음과 같은 결과가 나옵니다.

a함수에서 aaaa를 담아 반환할 때까지 기다리기 때문에 aaaa가 출력될 수 있습니다.

setTimeout을 사용하지 않아도 같은 값이 출력됩니다.

 

위의 코드를 콜백 함수로 했다면

a함수가 실행되고 이후에 t가 콜백 함수로 실행되는 형태로 복잡하게 표현되었을 것입니다.