[ES6] async/await

async

기존 프로미스 사용

    var 프로미스 = new Promise((resolve, reject) => {
      function 더하기(콜백) {
        1 + 1;
      }
      resolve()
    })

    프로미스.then(function () {
      console.log('hi')
    })

async사용

1)

    async function 더하기() {
      1 + 1;
    } // async사용하면 해당 함수 실행 후
      // promise가 남는다

    더하기().then(function () {
      console.log('성공')
    })

2)

    async function 더하기() {
      return 1 + 1;
    }
    더하기().then(function (결과) {
      console.log(결과) //2
    })

🧨 주의 : async는 성공만 판정할 수 있다.
강제로 실패 결과 만드는 법

    async function 더하기() {
      return Promise.reject('실패')
    }
    더하기().then(function (결과) {
      console.log(결과)
    }) //Uncaught (in promise) 실패

await

    async function 더하기() {
      var 프로미스 = new Promise(function (성공, 실패) {
        var 힘든연산 = 1 + 1;
        성공();
      })

      프로미스.then(function () {
        console.log('성공했음')
      })
   }
    더하기(); //성공했음.

await 사용하면?

    async function 더하기() {
      var 프로미스 = new Promise(function (성공, 실패) {
        var 힘든연산 = 1 + 1;
        성공('성공했음');
      })

      var 결과 = await 프로미스;
      // await :프로미스 완료까지 기다려라.
      // 판정 후 결과를 할당해줌.
      console.log(결과)

    }
    더하기(); //성공했음.

await은 프로미스.then()의 간략한 버전이다.
또한 async 내에서만 사용 가능하다.

await은 프로미스 실패시 에러나고 해당 코드에서
더 이상 진행되지 않고 멈춘다.

await에서 프로미스 실패시 진행하도록 해결하기

try{} catch{}

    async function 더하기() {
      var 프로미스 = new Promise(function (성공, 실패) {
        var 힘든연산 = 1 + 1;
        실패('실패');
      })

      try { var 결과 = await 프로미스;
          /*이거 일단 실행*/} catch { console.log('프로미스 실패시 실행') }; //안되면 catch 실행

      console.log(결과)

    }
    더하기(); //프로미스 실패시 실행

예제 활용해서 써보기

버튼 하나 만들어서 클릭하면 async/await이용해서 성공했어요 콘솔에 출력.

• 내 풀이

    const btn = document.querySelector('button')


    async function 더하기() {
      var 프로미스 = new Promise(function (성공, 실패) {
        성공('성공했어요')
      })
      var 결과 = await 프로미스;
      console.log(결과)

    }
    btn.addEventListener('click', 더하기())

• 코딩애플 풀이1)

    async function 더하기() {
      var 프로미스 = new Promise(function (성공, 실패) {
        document.getElementById('btn').addEventListener('click', function () {
          성공('성공했어요');
        })
      })
      var 결과 = await 프로미스;
      console.log(결과)

    }
    더하기()

• 코딩애플 풀이2)

    var 프로미스 = new Promise(function (성공, 실패) {
      document.getElementById('btn').addEventListener('click', function () {
        성공('성공했다!');
      })
    })
	
    async function 버튼누르기() {
      var 결과 = await 프로미스;
      console.log(결과)
    } //async await를 쓰면 프로미스의 판정을 기다리고 실행
     // 버튼을 눌러야 판정을 내려주니까 // 누르면?!!
    버튼누르기() //성공했다!

생각해보기

 async function 프로미스() {
      document.getElementById('btn').addEventListener('click', function () {
        return '성공했어요'
      });
    }

    async function 버튼누르기() {
      var 결과 = await 프로미스();
      console.log(결과)
    }

    버튼누르기();

undefined가 뜨는 이유는 프로미스()의 이벤트 리스너는 클릭을 해야 '성공했어요'를 반환한다. 그래서 클릭 전에 이미 undefined를 반환하는 상태라서 버튼누르기()가 실행되고 undefined가 뜨는 것이다.

async / await 왜 쓰냐?

1. async는 에러 위치를 찾기 용이하다.

function sample() {
  return sampleFunc()
    .then(data => return data)
    .then(data2 => return data2)
    .then(data3 => return data3)
    .catch(err => console.log(err))  // 결과적으로 문제가 발생했다
}

async function sample() {
  const data1 = await sampleFunc();      // 문제 발생시 data1값이 유효치 않음
  const data2 = await sampleFunc2(data1);
  return data2;
}