[기술질문] async/await란 무엇인가요?

👀 async/await는 비동기 작업을 처리할 때 정말 많이 사용하는 방법!
이번에는 async/await에 대해서 알아보려고 한다!
이번 질문도 역시 꼬꼬질~ (꼬리에 꼬리를 무는 질문~)

 

 

 

---

💁‍♀️ async/await란?

* async/await는 비동기적인 작업을 처리할 수 있는 ES2017의 문법입니다. 
* async 함수를 정의하면 함수 내부에서 await 함수를 정의하여 비동기 작업의 처리가 완료될 때까지 기다린 후, 결과값을 반환할 수 있습니다. 
* async/await는 Promise를 기반으로 하며, 코드를 보다 간결하고 직관적으로 작성할 수 있도록 해줍니다.

👀 Promise란? 비동기 처리의 상태 정보 3가지의 경우로 나타냄
1️⃣ 대기 상태 : 작업이 완료되지 않은 상태
2️⃣ 이행 상태 : 작업이 성공적으로 완료된 상태 ▶️ then 이후의 코드를 실행
3️⃣ 거부 상태 : 작업에 오류가 생겼거나, 실패하여 Promise의 결과값을 반환하지 않은 상태 ▶️ catch문으로 오류 출력 등 실행
2️⃣번과 3️⃣번 ▶️ 이행 또는 거부의 상태일 경우에는 then, catch문 이외에도 finally가 반드시 실행

 

 

 

💁‍♀️ async/await를 사용하는 이유

비동기 작업을 처리하기 위해 사용할 수 있는 방법은 콜백 함수, Promise, async/await 등이 있습니다. 
이 중 async/await를 사용하는 방법은 아래와 같습니다. 

1️⃣ 가독성 : 콜백 함수와 Promise 방식보다 직관적이고, 이해하기 쉽습니다.
2️⃣ 오류 처리 : async/await를 사용하면 try/catch 문을 이용하여 더욱 쉽게 오류 처리가 가능합니다.
3️⃣ 동기화 : async/await는 여러 비동기 작업을 동기적으로 처리하는 것에 편리합니다. await를 사용하여 하나의 비동기 작업이 완료될 때까지 다음 작업을 기다리게 할 수 있습니다.

 

 

 

💁‍♀️ 작동원리 (간단 예시)

const delay = (time) => {
  return new Promise((resolve) => 
    setTimeout(() => resolve(`Waited ${time}`), time))
}

const test = async () => {
  const message = await delay(1000)
  console.log(message) // output : Waited 1000
}

test()

👉🏻 delay 함수 : Promise를 반환하는 함수이며, 해당 함수는 위에 예시에서 1초의 시간 후, message를 반환합니다. 
👉🏻 test 함수 : await 키워드를 사용하여 'delay(1000)'이 반환하는 Promise가 이행될 때까지 기다립니다. 
Promise가 이행되면 'Waited 1000'이 message 변수에 할당됩니다. 이후, message의 값을 콘솔에 출력합니다. 

✅ async 키워드를 사용하여 정의되어 있으므로 비동기적으로 실행되며, await를 사용할 수 있습니다. 

 

 

 

💁‍♀️ 에러 처리하는 방법

const delay = (time) => {
  return new Promise((resolve, reject) => {
    if (isNaN(time)) {
      reject('type error')
    } else {
      setTimeout(() => resolve(`Waited ${time}`), time)
    }
  })
}

const test = async () => {
  try {
    const message = await delay(1000)
    console.log(message) // output : Waited 1000
  } catch (error) {
    console.error('error : ', error)
  }
}

test()

❗️ 위의 간단한 예제는 delay 함수에 reject함수와 실행될 코드, test 함수에 try/catch문을 추가한 것이다. 
만약 delay 함수에서 time에 들어온 값의 타입이 number가 아닌 경우, 에러가 발생합니다.
에러가 발생하여 reject 함수를 호출하고, Promise를 거부 상태로 만듭니다. 
* 이행 상태일 때 ▶️ resolve 함수 호출
* 거부 상태일 때 ▶️ reject 함수 호출

reject가 호출되면 Promise는 거부 상태가 되며, 이에 따라 catch 블록이 실행되어 에러 메시지가 출력됩니다.
반대로 delay 함수가 정상적으로 작동하고, resolve 함수를 호출하면 Promise를 이행 상태로 만듭니다.
이행 상태일 경우에는 try문이 실행됩니다.