MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다.
또한 async function expression을 사용해서 async function을 선언할 수도 있다.

Syntax

async function name([param[, param[, ... param]]]) {
   statements
}
name
함수의 이름.
param
함수에게 전달되기 위한 인자의 이름.
statements
함수본문을 구성하는 내용.

Description

async함수가 호출되어 졌을때, 이 함수는 Promise을 반환한다. 
async함수가 값을 리턴하면 Promise는 반환된 값을 갖고 resolve될 것이다. 
async함수가 exception이나 에러를 표시하는 특정값을 던졌을때 Promise는 이값과 함께 reject될 것이다.

async함수는 async함수의 실행을 일시정지하고 보내진 Promise의 해결을 위해 대기하고 다시 async함수의 실행을 재개하고 resolve된 값을 반환하는 await표현과 묶일 수 있다. 

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

Examples

Simple example

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

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

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

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

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

Rewriting a promise chain with an async function

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 2017 Draft (ECMA-262)
The definition of 'async function' in that specification.
Draft Initial definition in ES2017.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer  Edge Opera Safari (WebKit)
Basic support 55 52.0 (52.0) ? ? 42 10.1
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support No support 52.0 (52.0) ? 42 10.1 55

See also

문서 태그 및 공헌자

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