async & await - 직관적인 비동기 처리 코드 자성

async와 await는 Promise를 더 쉽게 이용할 수 있도록 도와준다.

 

1. Async

async는 Promise{<pending>}으로 나왔다.

Promise를 반환하면, 결과 값은 Promise 값을 반환한다.

그리하여 helloAsync()함수는 Promise를 반환하는 비동기 함수가 된다.

>> 그래서 console.log가 아닌 then을 사용해서 출력도 가능함을 알 수 있다.

>> Async는 return 값을 Promise로 만든다.

 

2. Await

// 비동기 함수는 Promise를 return한다.
// 이 함수는 실패가 없다.
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

// 이렇게 해도 되지만
// function delay(ms) {
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve();
//     }, ms);
//   });
// }

// async는 Promise를 반환한다.
// async function helloAsync() {
//   return delay(3000).then(() => {
//     return "hello Async";
//   });
// }

// 위를 이렇게 짧게 await로 나타낼 수 있다.
// await줄들은 모두 동기적으로 실행 됨
// await은 async함수에서만 사용 가능
async function helloAsync() {
  await delay(3000); 
  return "hello Async";
}

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

// 비동기 함수는 Promise를 return한다.
// 이 함수는 실패가 없다.
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

// 이렇게 해도 되지만
// function delay(ms) {
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve();
//     }, ms);
//   });
// }

// async는 Promise를 반환한다.
// async function helloAsync() {
//   return delay(3000).then(() => {
//     return "hello Async";
//   });
// }

// 위를 이렇게 짧게 await로 나타낼 수 있다.
// await줄들은 모두 동기적으로 실행 됨
// await은 async함수에서만 사용 가능
async function helloAsync() {
  await delay(3000);
  return "hello Async";
}

// 이렇게 간단하게 나타낼 수 있다.
async function main() {
  const res = await helloAsync();
  console.log(res);
}

main();

비동기 함수는 Promise를 return한다.

await줄들은 모두 동기적으로 실행 됨

await은 async함수에서만 사용 가능