ES8, 비동기 처리를 위한 async / await 기본 문법

  async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해준다.

 

 ⬇︎ 프로미스는 아래 글 참고

ES6, 비동기 처리를 위한 프로미스 (Promise)

 

 async 함수에는 await연산자가 포함될 수 있으며, await는 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환한다.

 async 함수는 항상 promise를 반환한다. 만약 async 함수의 반환값이 명시적으로 promise가 아니라면 암묵적으로 promise로 감싸진다.

async function 함수명(){
  await 비동기처리코드()
}

 

// 함수 선언식
async function funcDeclarations() {
  await 작성하고자 하는 코드
  ...
}

// 함수 표현식
const funcExpression = async function () {
  await 작성하고자 하는 코드
  ...
}

// 화살표 함수
const ArrowFunc = async () => {
  await 작성하고자 하는 코드
  ...
}

→ async / await 는 함수 선언식, 함수 표현식, 화살표 함수 모두 정의 가능하다.

 

 

👩🏻‍💻 example

const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      console.log(string);
    }, Math.floor(Math.random() * 100) + 1);
  });
};

const printAll = async () => {
  await printString('A');
  await printString('B');
  await printString('C');
};

printAll();

 

👾 async

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

함수 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.

 

👾 await

await 연산자는 async 함수 내부에서만 사용 가능하며 Promise를 기다리기 위해 사용된다.

let value = await expression;

 

• await 문은 Promise가 처리(fulfill || reject)될 때까지 async 함수의 실행을 일시 정지한다. Promise가 fulfill되면 async 함수를 일시 정지한 부분부터 실행한다. 이때 await 문의 반환값은 Promise 에서 fulfill된 값이 된다.

만약 Promise가 reject되면, await 문은 reject된 값을 throw한다.

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊