JavaScript 비동기 처리 시리즈
- [JavaScript] JavaScript 기본 문법 (8) - Javascript의 비동기 처리 (1) - 콜백(Callback)
- [JavaScript] JavaScript 기본 문법 (9) - Javascript의 비동기 처리 (2) - Promise
Async / Await
얘네 사실. Promise랑 동떨어져 있는 새로운 비동기 처리 방식아 아니다.
Promise를 좀 더 편하게 사용하기 위해 생긴 놈들이다.
그러니까, 왜 async/await을 먼저 배우지 않고 Promise를 먼저 배우고 나서 더 쉬운 놈들을 알려주냐? 하면,
Promise를 알아야 async/await을 이해하기 쉬워진다.
아니, Promise를 알아야 쓸 수 있고, async/await을 쓴다고 Promise를 안 쓰는 것이 아니다!
Pronunciation(!발음!)
우선 한 가지.
asynchronous [eɪˈsɪŋkrənəs] 라서,
async [eɪˈsɪŋk] 이다. 어싱크 아니고 에이싱크다.
근데 또 await은 await [əˈweɪt] 이다. 얘는 에이웨잇 아니고 어웨잇임.
어싱크/어웨잇, 에이싱크/에이웨잇 둘 다 아니고, 에이싱크/어웨잇 이다.
은근 əˈsɪŋk(어싱크) 로 읽는 사람들이 많은데.. 이상하게 나도 어싱크가 익숙한 거 같긴 하다. ㅋㅋㅋ
async
async 를 함수 앞에 붙여 주면, 그 함수는 Promise를 return하게 된다.
Promise가 아닌 값을 return해도, resolve된 Promise로 값을 변경하여 return하게 된다.
async function asyncTest() {
return 1;
}
console.log(asyncTest());
// output : Promise { 1 }
State:"resolved", Result : 1 인 Promise를 반환하는 것!
디버그모드에서 확인해 보면, Promise를 반환하는 것을 볼 수 있다.
async function asyncTest() {
return Promise.resolve(1);
}
asyncTest().then(console.log);
Promise 자체를 명시적으로 반환해주는 것도 가능하다.
await
일단, await 은 async 함수 안에서만 작동한다 는 것을 인지하자.
let value = await promise;
async 함수 내에서 await을 만나면, Promise가 처리(settled)될 때까지 대기한다.
그리고 Promise의 처리가 완료되어 resolve되면, result값을 return한다.
async function asyncTest() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
let result = await promise; // ***
console.log(result);
}
asyncTest();
/* output :
(실행 1초 후) 1 */
예시 코드의 흐름을 통해 이해해보자.
line 8 (***) 에서 await키워드를 사용했다.
asyncTest() 실행 도중에, line 8에서 Promise가 처리될 때 까지 함수 실행이 중단된다.
그리고, 1초가 지나(setTimeout) Promise가 resolve되면, Promise의 result인 1 이 변수 result 에 할당되게 된다.
await키워드를 붙이면, Promise 객체가 return되는 것이 아니라, Promise의 result값이 return된다! 이 점 주의할 것.
이렇게 await 키워드를 이용하면 promise.then 보다 더 깔끔하고 가독성 있게 Promise의 result값을 얻어낼 수 있다.
또한 Promise가 처리될 때 까지 함수의 실행을 중단하므로, 그 동안 cpu가 다른 작업을 처리할 수 있어 cpu 리소스가 낭비되지 않는 이점을 가진다.
Usage
우선 Promise를 사용하여 1, 2, 4, 8 ... 을 1초마다 출력하는 코드를 작성해 봅시다.
function promprom(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value * 2);
}, 1000);
});
}
promprom(1).then((value) => {
console.log(value);
promprom(value).then((value) => {
console.log(value);
promprom(value).then((value) => {
console.log(value);
promprom(value).then((value) => {
console.log(value);
});
});
});
});
/* output : (모든 출력은 앞 출력 이후 1초가 지난 후)
2
4
8
16
*/
Callback Hell 못지 않은 Promise.then Hell이 만들어진 듯 합니다. 와우!
그럼 이제 얘를 async/await을 이용해서 이쁘게 이쁘게 만들어 봅시다.
function promprom(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value * 2);
}, 1000);
});
}
async function asyncTest() {
let value = await promprom(1);
console.log(value);
value = await promprom(value);
console.log(value);
value = await promprom(value);
console.log(value);
value = await promprom(value);
console.log(value);
}
asyncTest();
/* output : (모든 출력은 앞 출력 이후 1초가 지난 후)
2
4
8
16
*/
정말 아릅답지 않나요?
위의 두 코드를 보고 아름다움과 희열을 느끼지 못했다면, 그걸 못 느끼는 당신이 불쌍해.
너무 깔끔해서 미칠 것 같아요. 진짜 최고야.
Error Handling
자 그럼 async / await 에서는 어떻게 에러를 처리하는 지 알아보자.
Promise가 resolve되면 await "promise" 에서는 Promise 객체의 result를 return한다.
그럼 만약 Promise가 reject된다면???
throw 한 것 처럼 Error가 던져진다!
그럼 이걸 어떻게 처리하냐?
매우 쉽다. try - catch 구문을 이용해 에러를 catch해내면 된다.
function promprom(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("await Error Handling Test!"));
}, 1000);
});
}
async function asyncTest() {
try {
let value = await promprom(1);
console.log(value);
} catch (error) {
console.log(error);
}
}
asyncTest();
/* output :
Error: await Error Handling Test!
*/
아니면 다른 방법도 존재한다.
try - catch 구문으로 Error를 catch해내지 않으면, async 함수 를 호출해 만든 Promise 객체가 reject 상태가 된다.
이 reject상태인 Promise 객체에 .catch() 를 달아 에러를 처리할 수도 있다. 아래처럼!
function promprom(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("await Error Handling Test!"));
}, 1000);
});
}
async function asyncTest() {
let value = await promprom(1);
console.log(value);
}
asyncTest().catch((error) => {
console.log(error);
});
/* output :
Error: await Error Handling Test!
*/
Reference
https://ko.javascript.info/async-await
<= [JavaScript] JavaScript 기본 문법 (9) - Javascript의 비동기 처리 (2) - Promise]