async 함수와 await

 

왜 사용하지?

 

async 함수는 비동기 프로그래밍을 위해 사용된다.

일반적으로 코드를 실행할 때, 어떤 작업이 끝날 때까지 기다리는 경우가 있는데, 시간이 오래 걸릴 수 있다.

async 함수를 사용하면, 이러한 작업이 끝날 때까지 기다리지 않고 다른 작업을 먼저 처리할 수 있다!

이렇게 하면 프로그램의 효율성이 높아지고, 특히 I/O 작업이나 네트워크 요청 같은 시간이 걸리는 작업에서 유용하다.

 

async (어싱크)함수 문법 

 

async는 function 앞에 위치한다.

async function f() {

      return 1;

}

 

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다.

async function f() {

    return 1;

}

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

 

 

아래처럼 명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일하다.

async function f() {

    return Promise.resolve(1);

}

 

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

 

 

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.

❗️async가 제공하는 기능은 이뿐만이 아니다.

❗️또 다른 키워드 await는 async 함수 안에서만 동작한다.

 

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다.

await는 '기다리다’라는 뜻을 가지고 있는데, 영어 뜻대로 결과는 그 이후 반환된다.

 

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

async function f() {

    let promise =newPromise((resolve, reject) => {

        setTimeout(() => resolve("완료!"), 1000)

    });

let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

alert(result); // "완료!"

}

 

f();

 

함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개된다.

이때 프라미스 객체의 result 값이 변수 result에 할당된다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력된다.

 

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

 

 

❗️일반 함수엔 await을 사용할 수 없다

async 함수가 아닌데 await을 사용하면 문법 에러가 발생한다.

 

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

function 앞에 async를 붙이지 않으면 이런 에러가 발생할 수 있다. 앞서 설명한 것과 같이 await는 async 함수 안에서만 동작한다.

 

❗️주의해야 할 점

await는 최상위 레벨 코드에서 작동하지 않는다.

// 최상위 레벨 코드에선 문법 에러가 발생함
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

하지만 익명 async 함수로 코드를 감싸면 최상위 레벨 코드에도 await를 사용할 수 있습니다.

(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

 

 

 

🌀 추가 정보

1. await는 ‘thenable’ 객체를 받는다.

promise.then처럼 await에도 thenable 객체(then 메서드가 있는 호출 가능한 객체)를 사용할 수 있다.

thenable 객체는 서드파티 객체가 프라미스가 아니지만 프라미스와 호환 가능한 객체를 제공할 수 있다는 점에서 생긴 기능입니다. 서드파티에서 받은 객체가 .then을 지원하면 이 객체를 await와 함께 사용할 수 있습니다.

 

("서드파티에서 받은 객체"라는 것은 당신이 만든 코드가 아닌 외부에서 제공된 코드나 라이브러리에서 전달된 객체를 의미합니다. 이 객체가 .then 메서드를 지원한다면, 이 객체를 await와 함께 사용하여 비동기 작업을 처리할 수 있다는 뜻입니다.)

 

await는 클래스 Thenable의 인스턴스를 받을 수 있다.

 

lass Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve);
    // 1000밀리초 후에 이행됨(result는 this.num*2)
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
};

async function f() {
  // 1초 후, 변수 result는 2가 됨
  let result = await new Thenable(1);
  alert(result);
}

f();

 

await는 .then이 구현되어있으면서 프라미스가 아닌 객체를 받으면, 내장 함수 resolve와 reject를 인수로 제공하는 메서드인 .then을 호출한다.(일반 Promise executor가 하는 일과 동일하다).

그리고 나서 await는 resolve와 reject 중 하나가 호출되길 기다렸다가((*)로 표시한 줄) 호출 결과를 가지고 다음 일을 진행한다.

 

 

2. async 클래스 메서드

: 메서드 이름 앞에 async를 추가하면 async 클래스 메서드를 선언할 수 있다.

 

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1

async 메서드와 async 함수는 프라미스를 반환하고 await를 사용할 수 있다는 점에서 동일하다.

 

 

참고자료

https://ko.javascript.info/async-await#ref-69

async와 await