async, await

또또또 깨져라 얍!

 

 

async / await

 

async/await는 프로미스를 기반으로 동작한다. async/await를 사용하면 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다.

 

setTimeout, callback, Promise 모두 비동기 코드 동기식으로 작성하는 기법들이지만, 모두 약간의 문제점을 갖고 있다. async/await는 이런 문제점을 해결하고 사용법도 단순하다.

 

 

async

 

async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다. async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve 하는 프로미스를 반환한다.

 

async function f() {
  return 1;
}

f().then(alert); // 1

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

 

 

await

 

await 키워드는 반드시 async 함수 내부에서 사용해야 한다. await는 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve 한 처리 결과를 반환한다. await 키워드는 반드시 프로미스 앞에서 사용해야 한다.

 

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

 

자바스크립트는 await 키워드를 만나면 프로미스가 처리될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

1초 후 이행되는 프로미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다.

 

 

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('성공'), 1000)
  });

  let result = await promise; // resolve 될때까지 기다림

  alert(result); // '성공'
}

f();

 

 

함수를 호출하고, 함수 본문이 실행되는 도중에 주석으로 표시한 줄에서 실행이 잠시 '중단' 되었다가 프로미스가 처리되면 실행이 재개됩니다. 이때 프라미스 객체의 resolve 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '성공'이 출력됩니다.

 

await는 말 그대로 프로미스가 처리될 때까지 함수 실행을 기다리게 만듭니다. 프로미스가 처리되면 그 결과와 함께 실행이 재개되죠. 프로미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

 

await는 promise.then보다 좀 더 세련되게 프로미스의 resolve 값을 얻을 수 있도록 해주는 문법입니다. promise.then보다 가독성이 좋고 쓰기도 쉽습니다.