async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다.

또한 async function expression을 사용해서 async function을 선언할 수도 있다.

Syntax

async function name([param[, param[, ... param]]]) { 
    statements 
}

매개변수

name
함수의 이름.
param
함수에게 전달되기 위한 인자의 이름.
statements
함수본문을 구성하는 내용.

반환 값

Promise : async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값.

Description

async 함수에는 await식이 포함될 수 있습니다. 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환합니다.

await 키워드는 async 함수에서만 유효하다는 것을 기억하십시오. async 함수의 본문 외부에서 사용하면 SyntaxError가 발생합니다.

async/await함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다.
promise가 구조화된 callback과 유사한 것 처럼 async/await또한 제네레이터(generator)와 프로미스(promise)를 묶는것과 유사하다.

Examples

Simple example

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function add1(x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
}

add1(10).then(v => {
  console.log(v);  // prints 60 after 4 seconds.
});

async function add2(x) {
  const p_a = resolveAfter2Seconds(20);
  const p_b = resolveAfter2Seconds(30);
  return x + await p_a + await p_b;
}

add2(10).then(v => {
  console.log(v);  // prints 60 after 2 seconds.
});

 

awaitpromise.all을 혼동하지 마세요

add1에서 첫 번째 await는 2 초이고 두 번째 await는 다시 2 초입니다. 두 번째 타이머는 첫 번째 타이머가 완료될 때까지 생성되지 않습니다. add2에서는 두 타이머가 모두 생성 된 다음 두 타이머가 await됩니다. 이렇게하면 타이머가 동시에 실행되기 때문에 4 초가 아닌 2 초가 지나면 해결됩니다. 그러나 두 await 호출은 모두 병렬로 진행되는 것이 아니라 연속적인 호출로 실행됩니다. 이는 Promise.all의 자동 응용 프로그램이 아닙니다. 두 개 이상의 promise를 동시에 await시키고 싶다면 Promise.all을 사용해야합니다.

 

async함수를 사용한 promise chain 재작성

Promise 를 반환하는 API는 promise chain을 만들며 여러 파트의 함수로 나뉜다.
아래 코드를 보자.

function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url) // returns a promise
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}

위의 코드는 하나의 async함수로 아래와 같이 쓰여질 수도 있다.

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

위 예제에서는 return 구문에 await 구문이 없다는 것에 주목하자. 이는 async function의 반환값이 암묵적으로 Promise.resolve로 감싸지기 때문이다.

Specifications

 

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'async function' in that specification.
Draft Initial definition in ES2017.
ECMAScript 2017 (ECMA-262)
The definition of 'async function' in that specification.
Standard  

 

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support55 Yes52 No4210.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes55 Yes524210.16.0

함께 보기

문서 태그 및 공헌자

이 페이지의 공헌자: limkukhyun, Konan
최종 변경: limkukhyun,