JavaScript Async

"async and await make promises easier to write"

async 함수가 promise를 반환하도록 만듭니다

await 함수가 promise를 기다리게 만듭니다

Async 문법

함수 앞의 키워드 async 함수가 promise를 반환하도록 만듭니다:

예제

async function myFunction() {
  return "Hello";
}

等同于：

async function myFunction() {
  return Promise.resolve("Hello");
}

Promise를 사용하는 방법은 다음과 같습니다:

myFunction().then(
  function(value) { /* 성공 시의 코드 */ },
  function(error) { /* 에러 발생 시의 코드 */ }
);

예제

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

직접 시험해 보세요

또는 더 간단하게, 일반 값을 기대할 때(에러가 아니라는 응답):

예제

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);

직접 시험해 보세요

Await 문법

함수 앞의 키워드 await 함수가 promise를 기다리게 만듭니다:

let value = await promise;

await 키워드는 다음과 같은 곳에서만 사용할 수 있습니다: async 함수 내에서 사용.

예제

그래서 천천히 이를 사용하는 방법을 배웁시다.

기본 문법

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

직접 시험해 보세요

타임아웃을 기다리는 중

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

직접 시험해 보세요

파일을 기다리는 중

async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("파일을 찾을 수 없음");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

직접 시험해 보세요

브라우저 지원

ECMAScript 2017은 JavaScript 키워드를 도입했습니다 async 및 await。

아래 표는 양자를 모두 완전히 지원하는 최초의 브라우저 버전을 설명합니다：

크롬 IE 파이어폭스 사파리 오페라
크롬 55 에지 15 파이어폭스 52 사파리 11 오페라 42
2016년 12월 2017년 4월 2017년 3월 2017년 9월 2016년 12월