[JavaScript] 자바스크립트 async/await 에 대해 알아보자

콜백함수를 좀더 깔끔하게 쓸려고 Promise가 나왔지만 이 역시 어려운 부분이 있다.

그래서 Promise보다 훨씬 쉽게 쓸 수 있는 ES8 문법이 나왔다.

’async, await’ 문법을 알아보자

 

 

async

async function returnPromise() {
    return '그냥 Promise 반환해줌';
}

 

위 코드처럼 async를 fuction 앞에 붙여주면

new Promise()를 사용한 복잡한 코드 없이도 저절로 Promise 객체가 생성이 된다.

위 함수의 return 값은 Promise의 resolve()처럼 작동되는 것이다.

 

async를 사용하여 Promise의 형식을 가지기 때문에

이 함수를 실행할 때 then()이나 catch()를 붙일 수도 있다.

async function returnProm() {
    return '그냥 Promise 반환해줌';
}

returnProm().then((r)=>{
	console.log(r) // '그냥 Promise 반환해줌' 출력.
})

 

 

 

await

 

그런데 then()도 귀찮고 어려우면

기능은 같지만 문법은 훨씬 간단한 await 키워드를 사용할 수 있다.

async function printProm(){
  var prom = new Promise((resolve, reject)=>{
    resolve('성공했어용');
  });
  
//  prom.then(function(result){
//	  console.log(result)
//  })
  
  var result = await prom;
  console.log(result); // '성공했어용' 출력
}
printProm(); 

 

awiat 키워드를 이용해서 Promise가 완료되면 결과를 변수에 담을 수 있는데

then() 보다 더 직관적으로 코드를 작성할 수 있게 된다.

 

그런데 await을 사용하면 catch()를 쓰지 않기 때문에

실패가 나오면 코드가 바로 멈춰버린다.

그래서 try/catch 구문을 이용해서 에러처리를 해줘야 한다.

async function printProm(){
  var prom = new Promise((resolve, reject)=>{
    resolve('성공했어용');
  });
  
  try {
	  var result = await prom;
	  console.log(result); // '성공했어용' 출력
	} catch {
		console.log('실패함')
	}
}
printProm(); 

 

try/catch 쓰면 더 복잡해 보이는데

Promise가 항상 성공이 나오면 굳이 안써도 된다.