[자바스크립트] async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기

async, await란?

기존의 콜백 함수와 promise의 단점을 보완한 비동기 처리 방식이다.

 

async, await의 필요성

JavaScript는 싱글 스레드 기반 언어이기 때문에 비동기 처리가 필수적이다. JavaScript의 일부인 async 그리고 await 키워드는 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 쉽도록 만들어준다. 

 

비동기 처리는 결과를 예측할 수 없기 때문에 동기식의 처리가 필요하다. 대표적으로 promise, callback이 있다. async와 await는 기존 동기식 처리의 단점을 보완하고 가독성을 높여주는 코드를 작성할 수 있다. 사용방법은 function() 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 await 뒤에 오는 부분은 반드시 promise를 반환해주어야 하고, async가 붙은 function도 promise를 반환해야 한다는 점이다. 

 

 

async - 비동기 함수를 async 함수로 만들어준다.

await - 키워드가 비동기 코드를 호출할 수 있게 해 준다.

 

 브라우저의 JavaScript 콘솔에서 테스트해볼 수 있다:

 

먼저 간단하게 hello function을 만들어 보았다. 위에 함수는 "Hello"를 반환한다.

함수 앞에 async 키워드를 추가하면 어떻게 될까? 

 

 

async를 위와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 한다. 이것이 async 기능의 특징 중 하나이다. 

async function expression을 사용하여 아래와 같이 만들 수도 있다. :

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

 

화살표 함수를 사용하면 아래처럼 쓸 수 있다. :

let hello = async () => { return "Hello" };

 

두 가지는 모두 같은 function을 한다. 

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

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

 

짧게 표현하면 아래와 같이 쓸 수 있다.

hello().then(console.log)

 

 

 

 

Reference

How to use promises - Learn web development | MDN