자바스크립트 async await 사용하기
전에 포스팅했던 Promise 를 더 쉽게 사용할 수 있게 해주는 문법인 async와 await에 대해서 알아보자.
async와 await은 처음엔 낯설지만 익숙해지면 굉장히 쉬운 문법이다.
async
async는 function 앞에 붙여서 사용한다.
async function hello(){
return "Hello World!";
}
hello(); //Promise {<fulfilled>: 'Hello World!'}
function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다.
명시적으로 Promise를 return값으로 주지 않아도, return 값을 Promise(이행된 프로미스)로 감싸서 반환한다.
그리고 async가 붙은 function은 내부에 await 문법을 사용할 수 있다.
await
await은 async 함수 안에서만 동작한다. async 함수가 아닌 곳에서 await 문법을 사용하면 Syntax error가 난다.
async function asyncTest() {
let result = await promise;
}
자바스크립트가 await 문법을 만나면 코드 읽는것을 잠시 중단하고 Promise가 처리될 때 까지 기다렸다가 다시 읽기 시작한다.
아래 예시를 보자.
async function hello() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello World!");
}, 1000);
})
let result = await promise;
console.log(result);
}
hello() // 1초 후 "Hello World!";
await 문법을 사용하지 않았다면 콘솔에 result를 찍었을때 Promise{<pending>} result : undefined 라고 나왔을 것이다.
(해석하자면 Promise가 대기중인 상태, result값을 아직 받지 못해 undefined 라고 뜨는것)
함수 실행 시 자바스크립트가 let result = await promise; 를 맞닥뜨리는 순간 잠시 함수 실행을 중지하고 Promise가 처리될때 까지 기다린다.
그 후 Promise가 처리되면 result 변수에 Promise 객체의 result 값이 할당된다.
그럼 간단한 동작방법은 알았으니 async와 await을 활용하여 Promise 포스팅에서 작성했던 코드를 수정해보자.
async function asyncTest() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
let rand = Math.ceil(Math.random() * 10);
if (rand >= 5) {
resolve("5보다 큼!");
}
else {
reject("5보다 작음!");
}
}, 1000);
})
let result = await promise
console.log(result);
}
asyncTest();
1초후에 결과값을 주는 Promise가 있고, result 변수는 await 문법을 사용하여 Promise가 처리될 때까지 기다렸다가 Promise가 전해주는 값을 저장한다.
.then() 을 사용하던 것 보다 코드가 더 간결해졌다. 개꿀😁
근데 Promise가 resolve 할때는 괜찮은데, reject 되면 이상한게 뜨는데요?
이상한게 아니라, 아까 말했던 것처럼 Promise가 정상적으로 이행되면 result 값을 반환하지만, 거부될 경우 throw 문을 쓰는것 처럼 에러를 던지기 때문에 이렇게 콘솔에 찍히는 것이다.
이는 에러핸들링을 해주면 원하는대로 처리할 수 있다.
(에러 처리하는 코드를 작성하지 않아서 앞에 Uncaught 라고 뜨는것이다. 처리되지 않은 에러라는 뜻)
에러핸들링
await이 던진 에러는 try...catch 문으로 처리가 가능하다.
async function asyncTest() {
try{
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
let rand = Math.ceil(Math.random() * 10);
if (rand >= 5) {
resolve("5보다 큼!");
}
else {
reject("5보다 작음!");
}
}, 1000);
})
let result = await promise
console.log(result);
}
catch(error){
console.log(`에러 발생 : ${error}`);
}
}
asyncTest();
위와 같이 try...catch 문으로 감싸면 효과적으로 에러를 처리할 수 있다.
try 문 안에서 함수가 실행되다가 Promise가 reject 될 경우 흐름이 catch 문 으로 넘어간다.
Promise가 정상적으로 이행되면 콘솔에 "5보다 큼!" 이 찍히고
거부될 경우에는 "에러 발생 : 5보다 작음!" 이 찍히는 것을 볼 수 있다.