[JS] 비동기 처리 async / await에 대해 알아보자

async /await

Promise 기반의 비동기 작업을 보다 간단하고 가독성 있게 작성할 수 있도록 도와주는 문법

async function 함수명() {}

비동기 처리 방법 중 하나인 Promise를 더 간단하게 사용할 수 있도록 도와준다

async 키워드를 사용하여 함수를 비동기 함수로 만들고,

await 키워드를 사용하여 Promise가 해결될 때까지 기다릴 수 있다

 

특징

- 기존의 new Promise의 작업을 단축화시킨 표현이다

- async 함수는 Promise를 반환한다

  => 값을 받을 때에는 await 혹은 .then((res) => a = res)으로 받아야 한다

  => Promise를 반환하는 함수일 경우, await를 만날 때 실행이 완료될 때까지 기다려줌

 

async / await 사용 방법

async

async 함수는 항상 Promise를 반환한다

함수에서 반환되는 값은 자동으로 Promise로 반환되어 resolve()를 통해 감싸지게 된다

async function myAsyncFunction() {
  return "Hello, Async!";
}
// myAsyncFunction = () => new Promise((res)=>res("Hello, Async!"))

myAsyncFunction().then(result => {
  console.log(result); // "Hello, Async!"
});

 

await

Promise가 완료될 때까지 비동기 작업을 일시 중지한다

즉, await 뒤에 있는 Promise(비동기 작업)가 끝날 때, 값을 받아내는 것이라고 생각하면 된다

+ 함수 앞에 async가 있어야 사용할 수 있다

// 비동기 작업을 하는 fetchData 함수
async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("데이터 로드 완료"), 1000);
  });
}

// 비동기 작업을 하는 process 함수
async function process() {
  try {
    const data = await fetchData(); // fetchData()가 끝날 때까지 기다린 후 data에 값을 할당함
    console.log(data); // 출력: 데이터 로드 완료
    
    const nextData = "추가 작업 완료";
    console.log(nextData); // 출력: 추가 작업 완료
  } catch (error) {
    console.error("에러 발생:", error);
  }
}
// process 함수 호출
process();

 

 

사용하는 이유

비동기 작업은 작업의 순서를 보장하지 않기 때문에 순서를 순차적으로 보여줄 필요가 있다

 

(1) 가독성 향상

비동기 작업을 동기 작업처럼 작성할 수 있어 가독성이 높다

 

(2) 디버깅 용이

Promise 체이닝보다 디버깅이 더 쉽다

 

---

[참고자료]

https://youtu.be/1z5bU-CTVsQ?si=AiPGlwnA3X4IuYZG

https://springfall.cc/article/2022-11/easy-promise-async-await

=> promise, async, await에 대해 정말 자세하게 설명해놓은 글인데 읽어보면 도움이 될 것이다