[JS] async와 await

javascript로 코드를 짜다보면 비동기는 빠질 수 없는 개념입니다. 

만약 비동기로 작성하지않는다면?....

 

콜백지옥....

위에 사진처럼 콜백 지옥에 빠지게 됩니다.. 하하..... 코드의 가독성도 저하되고, 문제점을 바로 찾을 수가 없습니다. 이를 해결하기 위해  async와 await를 사용하는 방법과 개념을 정리해보려고 합니다. 

 

---

1.async

async는 function 키워드 앞에 위치하게 됩니다.

async function test() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

async function test() {
  return Promise.resolve(1);
}

위 두 개의 결괏값은 똑같이 1로 반환됩니다.  왜 그럴까요? async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다.

 

2.async

await의 문법을 알아볼까요?

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

3초 후 이행되는 프라미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다.

async function test() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("3초 기다려!"), 3000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림니다. <=요기

  console.log(result); // "3초 기다려!"
}

test();

함수를 호출하고, 함수 본문이 실행되는 도중에 await 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개됩니다. 이때 프라미스 객체의 result 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 3초 뒤에 '3초 기다려!'가 출력됩니다.

await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만듭니다. 프라미스가 처리되면 그 결과와 함께 실행이 재개되죠. 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법입니다. promise.then보다 가독성 좋고 쓰기도 쉽습니다.

 

일반 함수엔 await을 사용할 수 없습니다.

function test() {
  let prmise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

일반 함수에서 await를 사용하게 된다면 에러가 발생됩니다.

 

3 await & async의 예외처리

이제 코드를 비동기로 처리하였다면, 분명 예외처리를 해줘야 합니다.  실제 상황에선 프라미스가 거부되기 전에 약간의 시간이 지체되는 경우가 있습니다. 이런 경우엔 await가 에러를 던지기 전에 지연이 발생합니다. await가 던진 에러는 throw가 던진 에러를 잡을 때처럼 try..catch를 사용해 잡을 수 있습니다.

async function test() {
  try {
    let response = await sungmin();
    let input = await input();
    let DB = await DB_query();
    
  } catch(err) {
    //sungmin, input, DB_query에서 오류나는 것들은 이곳으로 날라옵니다.
    console.log(err);
  }
}

test();

이렇게 사용할 수 있습니다. 

 

간단하게 async와 await를 사용해보는 방법을 정리해보았습니다. 궁금하신 점 있으면 댓글 달아주세요