1. async

공식페이지에서는 다음과 같이 설명한다.

async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.

• async 키워드가 붙은 함수 실행 후 Promise 오브젝트가 남는다.

2. 사용법

async function add() {
  return "성공입니다!";
}
      
add().then((result) => {
  console.log(result);
});

• async 키워드는 함수선언 앞에 붙인다.
• 파라미터가 없기 때문에 성공만 가능하다. (then()만 실행할수있음)
• return Promise.reject() 강제로 실패를 줄 순 있다.

3. await

• then()과 비슷한 역할로 생각하면 쉽다.
• async 키워드를 쓴 함수 안에서는 await 이라는 키워드를 사용할 수 있다.
• await은 Promise비동기 처리가 완료될때까지 코드 실행을 멈추고 Promise가 완료되면 코드를 실행시킨다.

      async function add() {
        let total = new Promise((resolve, reject) => {
          let result = 1 + 1;
          resolve(result);
        });
        let result = await total; // await
        console.log(result);
      }

      add();

이런식으로 then() 대신 사용하면 된다.

await 특징

• 실패시 에러가 뜨고 멈춤

      async function add() {
        var total = new Promise((resolve, reject) => {
          reject(); // 실패
        });
        console.log("실패 전");
        var result = await total;
        console.log("실패 후");
        console.log(result);
      }

      add();

실패 후 부터 코드가 실행되지 않는 것을 확인할 수 있다.

try-catch

실패시 코드실행을 멈추고 싶지 않을 경우 try-catch 문법을 사용할 수 있다.

다음과 같이 사용한다.

try { try안의 코드가 실패할경우 }
catch { catch안의 코드를 실행한다 }

활용해보자

      async function add() {
        var total = new Promise((resolve, reject) => {
          resolve(); // 성공
        });
        try {
          var result = await total;
          console.log("성공입니다");
        } catch {
          console.log("실패입니다");
        }
      }
      
      add();

resolve()를 썼더니 try{}가 실행되어 콘솔창에 성공입니다 가 출력된다.

      async function add() {
        var total = new Promise((resolve, reject) => {
          reject(); // 실패
        });
        try {
          var result = await total;
          console.log("성공입니다");
        } catch {
          console.log("실패입니다");
        }
      }

      add();

reject()를 썼더니 catch{}가 실행되어 콘솔창에 실패입니다 가 출력된다.