async와 await

1. async/await
프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성한다.

 

// 프로미스 객체 사용한 비동기 처리 함수
const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = () => {
  delay(2000).then(() => {
    console.log("대기");
  });
};

start();

 

start 함수를 호출하면, 2초 후에 "대기" 라는 단어가 출력된다. 이와 같이 작성된 코드를 async/await 을 이용해 더 직관적인 코드로 바꿔 작성할 수 있다. async 와 await 문법은 프로미스 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있게 도와주는 역할을 한다.

1) async
async 키워드를 사용해 작성된 코드를 변경한다.

 

// async 적용
const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = async () => {
  delay(2000).then(() => {
    console.log("대기");
  });
};

start();

 

async 키워드는 함수 이름의 오른쪽에 작성된다. async 키워드가 붙은 함수는 프로미스 객체를 반환한다. 이 async 키워드가 붙은 start 함수를 출력해보면, Promise {<pending>}, 즉 state가 pending인 프로미스가 출력되는 것을 볼 수 있다.
따라서 이렇게 async를 붙인 함수는 자동으로 프로미스 객체를 반환하는 비동기처리 함수가 되기 때문에, 이 start 함수를 이렇게 then 메서드를 사용해 작성할 수 있다.

 

// async 적용2
const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = async () => {
  // delay(2000).then(() => {
  //     console.log("대기");
  // });
  return "대기";
};

start().then((res) => {
  console.log(res);
});

함수에 async 키워드만 붙이면 프로미스 객체를 반환함과 동시에 리턴문 옆에 작성한 값이 resolve의 결괏값으로 전달되기 때문에 훨씬 깔끔한 코드를 작성할 수 있다.

2) await
await 키워드는 특정 함수의 앞에 작성되고 then 키워드를 대신해 사용할 수 있다.

 

// await 적용
const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = async () => {
  await delay(2000);
  console.log("대기");
};

start();

 

await 키워드는 async 키워드가 붙어있는 함수의 내부에서만 사용 가능하며, 이 await은 "기다리다" 라는 뜻을 지닌 만큼, 말 그대로 해당 프로미스가 처리될 때까지, 즉 delay 함수가 처리 완료 될 때까지 기다린 다음, 결괏값을 받아볼 수 있기 때문에 await가 작성된 함수가 종료되기 전에는 그 아래 작성된 코드들은 수행되지 않는다.

이렇게 async와 await으로 비동기 함수를 처리하게 되면, 프로미스 객체를 훨씬 가독성 좋게 사용 가능하고, 편리하게 사용할 수 있으며, 기존에 실행 순서가 예측이 불가능 했던 비동기 처리 방식과는 달리, 비동기 함수의 실행 순서를 예측할 수 있게 만들어준다.


2. 에러 핸들링
async 와 await 를 이용한 비동기 처리 함수에서는 try catch 문법을 이용해 예외처리를 할 수 있다.
async 키워드가 작성된 start 함수 안에 try 라는 키워드를 작성한다. 이 try의 블록 안에 작성된 코드가 실행되고, 해당 코드에서 에러가 발생한다면, 아래에 작성할 catch 블록 안의 코드가 실행되게 된다. 발견된 에러는 이 catch에 전달된 error 객체에 담기게 되기 때문에, 에러 발생 시 이 error 객체를 사용하면, 어떠한 에러가 발생했는지 출력할 수 있다.

 

// 에러 핸들링 try catch 문법
const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = async () => {
  try {
    await delay(2000);
    console.log("대기");
  } catch (error) {
    console.log(error);
  }
};

start();

정리해보면, async/await은 프로미스 객체를 좀 더 직관적이고 편리하게 사용할 수 있게 도와주는 키워드이고, async가 붙은 함수는 항상 프로미스 객체를 반환하고, await 키워드는 async 함수 내부에서만 사용 가능하며, 이 await 가 붙은 함수에서는 항상 해당 프로미스가 처리 될 때 까지 대기하게 된다. 그리고 이 async/await 는 try/catch 를 사용해 에러를 핸들링 할 수 있다.


참고강의 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의