[Javascript] async & await 사용법

Javascript에서 async functions 그리고 await 키워드는 ECMAScript2017에 추가되었다.

이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 쉽도록 만들어 준다.

 

오늘은 이 async & await 키워드에 대해 알아보자.

---

 

asunc/await의 기초

async/await 코드는 두 가지 부분으로 나눠져 있다.

 

async 키워드

먼저 비동기 함수를 async 함수로 만들기 위하여 function()앞에 async 키워드를 추가한다. async fuction()은 await 키워드가 비동기 코드를 호출할 수 있게 해주는 함수이다.

 

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

이 코드는 Promise를 반환한다. 이것이 async 기능의 특징 중 하나이다. 

 

 

실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 .then() 블럭을 사용해야 한다.

hello().then((value) => console.log(value))

 

정리하면, async를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 한다. 또한 동기식 함수는 await 사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있다.

함수가 async라고 선언될 때 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있다.

 

 

await 키워드

비동기 함수를 await 키워드와 함께 쓰면 그 장점이 확실히 보인다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있다.

그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환한다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 한다.

 

await 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있다.

async function hello() {
  return greeting = await Promise.resolve("Hello");
};

hello().then(alert);

물론 위의 예시는 그다지 쓸모있진 않다. 다만 어떻게 구문을 작성해야 하는지 잘 나타내준다.

 

함수 안에 코드를 작성했고, function 키워드 앞에 async 키워드를 썼다는 것을 알 수 있다. (꼭 이렇게 써야한다.)

비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 한다. await는 async function 안에서만 쓸 수 있다.

 

 

---

#References

https://developer.mozilla.org/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises#the_downsides_of_asyncawait

async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 | MDN