캡틴 판교

async & await

Async

  // async를 함수 앞에 붙이면 함수가 promise 역활 가능
  // 함수 실행 후에 promise 오브젝트가 남는다.
  // 따라서, const promise = new Promise(); 생략하고 사용 가능.
  // 그러나 성공만 가능
  async function 더하기() {
     return 1 + 1
  //return을 붙히면 연산결과를 넘겨줄 수 있다.
  }

  더하기().then(function(a){
    console.log(a);
  })

  더하기(); // 2;

Await

  //await 
  //async 함수 안에서 쓰는 await => then대신 사용가능하다.
  //promise 해결까지 기다려줌
  async function 더하기() {
    const promise = new Promise(function(resolve, reject){
      const 힘든연산 = 1 + 1;
      // resolve(100);
      reject();
    })

    // try { 이걸 해보고 에러나면 } catch { 이걸 실행해주세요 }
    try {
      const 결과 = await promise;
      console.log(결과);
      //더하기().then(function(a){
      //  console.log(a);
      // })
      //의 축약버전이 await promise;
      //힘든연산 결과값을 변수 결과에 간단하게 저장할 수 있다.
    } catch {
      console.log('연산이 잘 안되었군요!');
    }
  }
  
  더하기(); // '연산이 잘 안되었군요!'

예시

async, await를 활용해서 버튼을 클릭하면 콘솔창에 '잘 잘동되었군요!'나올 수 있게 코드 작성해보기.

  async function button() {
    let clickbtn = new Promise(function(resolve, reject) {
      const btn = document.querySelector('.btn');
      btn.addEventListener('click', ()=>{
        resolve('잘 잘동되었군요!');
      })
    })


    let result = await clickbtn;
    console.log(result);
  }


  button(); // '잘 잘동되었군요!'

콘솔창