ES8에 정의된 문법으로 기존의 콜백함수와 Promise로 비동기를 처리하는데 있어서 가독성이 떨어지는 단점을 보완하기 위해 나왔다. Promise를 좀 더 편하게 사용할 수 있도록 한다. 콜백의 깊이가 깊지 않을 경우에는 콜백함수나 Promise를 사용하는 것이 나을 수 있다.
- async function 변수명(매개변수1, 매개변수2,..){
변수명 = await 표현식;
}
async는 비동기 기능이 존재하는 function 앞에 선언한다. async를 붙이면 해당 함수는 암묵적으로 Promise를 사용하여 결과를 반환한다. await는 async 함수 내에서만 동작하며, async함수의 실행을 일시 중지하고 전달된 promise가 완료된 후에 async 함수를 다시 시행한다. await로 선언할 수 있는 대상은 Promise 객체나 값이 될 수 있으며 그 이외의 것은 await로 선언될 수 없다.
아래 예제는 다중 Promise를 사용하여 동기화를 시행한 문장이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
func1(1, 2000)
.then(function (a) {
func1(2, 3000)
.then(function (a) {
func1(3, 500)
})
}); //1,2,3
function func1(num, sec) {
return new Promise(resolve => {
setTimeout(() => {
console.log(num);
resolve("finish");
}, sec);
})
};
</script>
</body>
</html>
위의 다중 Promise를 사용하여 동기화를 시행한 문장을 Async와 Await를 사용하여 동기화를 시행한 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// async와 await를 사용한 예제
async function test() {
// async함수를 멈추고 await에 있는 Promise완료 된 후에 async 시행
await func1(1, 2000);
// 처음 함수가 완료되고, 두번째 await 시행되면서 async함수를 멈추고 await에 있는 Promise완료 된 후에 async 시행
await func1(2, 3000);
// 두번째 함수가 완료되고, 세번째 await 시행되면서 async함수를 멈추고 await에 있는 Promise완료 된 후에 async 시행
await func1(3, 500);
}
function func1(num, sec) {
return new Promise(resolve => {
setTimeout(() => {
console.log(num);
resolve("finish");
}, sec);
});
}
test(); // 1, 2, 3
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript: location 객체란? (0) | 2024.08.15 |
|---|---|
| JavaScript: Screen 객체 (0) | 2024.08.15 |
| JavaScript : 모듈(module)에 대해서 (0) | 2024.08.14 |
| JavaScript : 비동기 통신에 대해서 (Fetch & Axios) (0) | 2024.08.14 |
| JavaScript : DOM의 키보드 이벤트에 대해서 (0) | 2024.08.12 |
| JavaScript : 비동기를 처리하는 방법 (Promise) (0) | 2024.08.11 |
| JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 (0) | 2024.08.11 |
| JavaScript 내장함수 : Object관련 내장함수 (0) | 2024.08.10 |