async, await 사용방법을 설명해주세요.

답변

async, await 방식을 Promise 기반 코드를 동기식 코드처럼 작성할 수 있도록 해줍니다.

async는 함수가 비동기 함수임을 선언한 것이고, await는 해당 비동기 작업이 완료될 때까지 기다린다는 의미입니다.

함수 앞에 async를 선언하면 해당 함수는 Promise 객체를 반환한다는 의미이고, 내부적으로 Promise를 반환하는 작업 앞에 await를 붙여 해당 작업이 완료될 때까지 기다리도록 하여 마치 동기적인 코드처럼 사용할 수 있습니다.

꼬리 질문

async/await와 Promise.then()은 언제 사용하는 게 더 적합한가요?

 

답변

async/await는 비동기 코드들을 순차적으로 실행할 때 더 적합합니다.

비동기 코드를 동기 코드처럼 사용할 수 있어 흐름을 파악하기에 유리합니다.

반면 Promise.then은 여러 비동기 작업들을 동시에 실행하고 모두 완료된 후의 작업을 Promise.all()과 .then()을 통해 처리할 때 더 유리합니다.

정리하면 비동기 작업을 처리할 때 async/await는 순차적인 처리, then()은 비동기의 장점을 살려서 병렬 처리할 때 더 유리합니다.

이외에도 코드의 길이가 짧다면 then이 더 유리할 수 있는 등 코드의 가독성 측면에서 더 유리한 측을 선택할 수 있습니다.

 

async/await는 병렬 처리를 진행할 수 없나요?

 

답변

Promise.all과 함께 사용하면 병렬 처리를 실행할 수 있습니다.

Promise.all을 통해 여러 작업을 병렬로 실행시키고 앞에 await를 붙여 .then 대신 사용할 수 있습니다.

이를 통해 async.await 방식으로도 비동기 작업을 병렬처리할 수 있습니다.

 

예제 코드

 

function task1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Task 1 완료');
      resolve();
    }, 1000);
  });
}

function task2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Task 2 완료');
      resolve();
    }, 1000);
  });
}

function task3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Task 3 완료');
      resolve();
    }, 1000);
  });
}

// async와 await 사용
async function runTasks() {
  await task1();
  await task2();
  await task3();
  console.log('모든 작업 완료');
}

runTasks();