[ES6] 9. async / await

promise 문법은 어렵고 복잡하다

훨씬 쉽게 쓸 수 있는 문법이 ES8 문법인 async/await !

---

📌 async / await

async

promise 객체 생성해주는 키워드

async function Add() {
        return 1 + 1;
      }

      Add().then(function (res) {
        console.log("성공이에요 : " + res);
      });

어싱크를 함수 앞에 작성하면 promise 객체가 자동 생성된다
Add 함수 자체가 Promise가 되는 것이다
그래서 then 으로 사용하면서 순차적 코드 실행이 가능하다

await

promise가 완료될 때까지 기다리게 하는 키워드
promise.then() 과 같은 역할

async function Add() {
        let math = new Promise((resolve, reject) => {
          let res = 1 + 1;
          resolve(res);
        });

        let data = await math;
        console.log(data);
      }
Add()
    

resolve ( ) 함수 안에 있던 2라는 파라미터는

var data 변수에 저장되어 출력이 가능하다

⚠️ await은 promise 실패 시에 에러나고 멈춘다

➡️ 실패를 다룰 수 있는 try/catch 문 사용하기

try/catch

만약 promise 실패 시 catch 문이 실행된다

async function Add() {
  let math = new Promise((resolve, reject) => {
    let res = 1 + 1;
    reject(data);
  });

  try {
    let data = await math;
    console.log(data);
  } catch {
    console.log(" 연산 실패");
  }
}

예제

버튼을 클릭하면 성공하는 promise 만들기 !

<button id="button">버튼이에요</button>
    <script>
      let promise = new Promise((resolve, reject) => {
        $("#button").click(() => {
          resolve("성공");
          button();
        });
      });
      async function button() {
        let result = await promise;
        console.log(result);
      }
      </script>