자바스크립트 JavaScript : async/await

async/await

ES8에서 도입된 패턴으로, 프로미스를 더 간결하게 사용할 수 있게 해줍니다.

 

async 키워드를 쓰면 Promise 오브젝트가 절로 생성됩니다. 

말그대로입니다. new Promise() 어쩌구 하실 필요가 없습니다.

근데 이 키워드는 function 선언 앞에만 붙일 수 있습니다.

async function 어려운연산 (){
  1 + 1 
}

그럼 이 함수 자체가 Promise가 되어버립니다. 

그래서 이 함수를 실행할 때 뒤에 then을 붙일 수 있습니다. Promise니까요. 

(함수를 실행하면 그 자리에 Promise 인스턴스 (new Promise() 로 만든 오브젝트)가 남습니다. )

 

async function 더하기(){
  1 + 1 
}

더하기().then(function(){
  console.log('더하기 성공했어요')
});

그럼 이제 Promise 만들 때 했던거 처럼 then을 붙여서 더하기() 함수가 성공한 뒤에 뭔가를 실행시킬 수 있습니다. 

 

함수안에서 연산한 결과를 then 안에서 사용하고 싶다면

async function 더하기(){
  return 1 + 1 
}

더하기().then(function(결과){
  console.log(결과)
});

이렇게하시면 됩니다.

return 오른쪽에 결과를 적어주시면 됩니다. 그럼 then함수까지 전해집니다.

 

then() 함수가 귀찮다면 await 키워드를 쓸 수 있습니다. 

async 키워드를 쓴 함수 안에서는 await을 사용가능합니다. 

await은 그냥 프로미스.then() 대체품으로 생각하시면 됩니다. 

하지만 then보다 훨씬 문법이 간단합니다. 

 

새로운 예제를 만들어봅시다. 

어떤 function 안에서 어려운 연산을 실행한 뒤에 성공/실패를 판정해주는 Promise를 만들고 싶습니다. 

그럼 어떻게 할까요?

async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 결과 = 1 + 1;
    성공();
  });
  어려운연산.then();
}
더하기();

많이 했던 패턴대로 이렇게하시면 됩니다.

 

그럼 이제 어려운연산.then() 이렇게 성공시 특정 코드를 실행할 수 있습니다. 

근데 .then()이게 너무 복잡해서 보기 싫으시면 

await이라는 키워드를 이용가능합니다. 

async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 결과 = 1 + 1;
    성공();
  });
  var 결과 = await 어려운연산;
}
더하기();

어려운연산.then() 과 매우 유사한 문법입니다. 

정확한 뜻은 어려운연산 Promise를 기다린 다음에 완료되면 결과를 변수에 담아주세요 입니다. 

 

연산 결과를 출력하거나 그러고 싶다면 성공 함수에 파라미터를 담아주시면 됩니다.

async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 결과 = 1 + 1;
    성공(결과);
  });
  var 결과 = await 어려운연산;
  console.log(결과);
}
더하기();

성공()함수 안에 있던 2라는 파라미터는var 결과라는 변수에 저장됩니다. 

그럼 Promise의 연산 결과를 출력해볼 수도 있겠네요. 

 

await은 실패하면 에러가 나고 코드가 멈춥니다

await 은 Promise가 실패할 경우 코드는 에러가 나고 코드실행을 멈춥니다.

그럼 await 하단에 있는 코드들은 더 이상 실행이 되지 않겠죠.

 

그래서 Promise가 실패할 경우 코드실행을 멈추고 싶지 않으면 약간 특별한 방법이 필요합니다. 

async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    실패();
  });
  try {  var 결과 = await 어려운연산 }
  catch { 어려운연산 Promise가 실패할 경우 실행할 코드 }
}

try catch라는 자바스크립트 문법인데,

try {} 안의 코드가 에러가 나고 멈출 경우 대신 catch {} 내부의 코드를 실행해줍니다. 

이렇게 에러처리를 하실 수 있습니다.