[JS] async & await

async & await

콜백 지옥 현상을 해결하기 위해서 프로미스로 비동기 처리를 하더라도 여러 개의 프로미스가 then을 통해 체이닝되며 코드의 가독성이 저하되는 것을 알 수 있다. 이때, async와 await를 사용하여 더욱 편리하고 가독성있는 코드를 작성할 수 있다.

 

async와 await 사용법

• 함수 앞에 async를 붙이면 해당 함수는 자동적으로 프로미스를 반환하는 함수가 됨
• 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날 때까지 대기 (동기적으로 처리)
• await은 async가 붙은 함수 안에서만 사용 가능

 

async 사용 예제

function helloAsync() {
  return new Promise((resolve) => {
    resolve("helloAsync");
  });
}

helloAsync().then(console.log);

// helloAsync

위와 같이 프로미스를 사용하여 작성된 코드를 async를 사용하여 다음과 같이 바꿀 수 있다.

async function helloAsync() {
  return "helloAsync";
}

helloAsync().then(console.log);

// helloAsync

async가 붙은 함수는 해당 비동기 작업 객체 프로미스의 resolve 결과를 리턴하게 된다.

즉, 위 코드에서 "helloAsync"를 인자로 resolve 함수를 수행한 결과를 리턴하는 것이다.

 

await 사용 예제

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  return delay(3000).then(() => {
    return "helloAsync";
  });
}

helloAsync().then(console.log);

// helloAsync

프로미스를 이용하여 3초 후에 "helloAsync"를 출력하는 코드이다. await을 이용하여 다음과 같이 바꿀 수 있다.

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function helloAsync() {
  await delay(3000);
  return "helloAsync";
}

helloAsync().then(console.log);

// helloAsync

await을 사용하면 then을 사용하지 않고 더 간결하게 비동기적인 코드를 동기적으로 처리할 수 있다.

await은 async가 붙은 함수 안에서만 사용 가능하다.

---