[Javascript] 비동기처리 - 3. async/await

javascript의 비동기 처리 세번 째, async/await 에 대한 글이다.

첫 번째 Callback과 Promise에 대한 정리는 아래 링크에서 볼 수 있다.

 

https://mingmeng030.tistory.com/257

[Javascript] 비동기처리 - 1. Callback

https://mingmeng030.tistory.com/258

[Javascript] 비동기처리 - 2. Promise

이전 포스팅에서 Promise의 단점으로 디버깅의 어려움과 들여쓰기, 예외처리 등에 대한 문제를 언급했다.

async/await는 Callback과 Promise 단점의 보완책으로 사용된다.

 

   async / await   

async/await는 ES7부터 추가된 것으로, 이를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있다.

아래는 예시로 작성한 코드이다.

async function test(){
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  let result = await promise; //promise가 이행(fulfilled)될 때까지 기다림
  console.log(result); // "완료!"
}
test();

📌 async 키워드는 function 앞에 붙는다.

    - function 앞에 async를 붙이지 않으면 syntax Error가 발생한다.

 

📌 await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있다.

 

   async 함수는 Promise를 반환한다   

async function test(){
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  let result = await promise; //promise가 이행(fulfilled)될 때까지 기다림
  return true;
}

test().then((result)=> console.log("result:", result));

let result = test();
console.log(result);

 

위 코드 실행 결과

📌 async 함수를 호출하면 명시적으로 Promise 객체를 생성하여 리턴하지 않아도 Promise 객체를 리턴한다.

 - 위 코드의 실행 결과에서 then method를 통해 받은 값은 true 지만

  함수의 return 값을 저장하여 출력한 값이 true가 아닌 Promise 객체임을 통해 Promise 객체가 자동으로 return 됨을 알 수 있다.

 

예외 처리

catch 메소드로만 예외 처리를 해야했던 Promise와는 달리 

동기, 비동기 구분없이 try/catch로 일관되게 예외 처리를 할 수 있는 점 또한 async/await의 이점이다.

 

  async가 아닌 함수에서 async 함수 호출하기  

아래와 같이 f 라는 일반 함수에서 wait라는 async 함수를 사용하려면 어떻게 해야할까?

f는 일반 함수이기 때문에 여기선 'await'를 사용할 수 없다.

async function wait() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return 10;
}

function f() {
// 코드 작성
}

 

해답

async function wait() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return 10;
}

function f() {
  wait().then(result => alert(result));
}

f();

async 함수는 Promise를 반환하므로 then 메소드를 붙여 사용하면 된다.

 

 

💡 Top-Level await

기존에는 최상위 레벨의 코드에서는 await를 사용할 수 없었으나 ES2022부터는 Top-Level await가 추가되었다.

아래 카카오 FE 기술 블로그를 통해 접하게 되었는데, 다른 추가된 기능들도 있으니 참고하자.

https://fe-developers.kakaoent.com/2022/220728-es2022/

 

 

지금까지 javascript의 비동기 처리 세 가지 방법에 대해 알아보았다.

이번 포스팅들을 통해 개념을 정확히 익히고 정리하는 시간이 되어 의미있는 시간이었다 : )

 

 

[ 참고 ]

https://ko.javascript.info/async-await

https://www.daleseo.com/js-async-async-await/