JS중급_async와 await

Adrian·2022년 3월 20일

▶️ Promise보다 쉬운 async와 await

async function hardwork() {
	1 + 1
}

async, await 라는 키워드를 이용하면 Promise와 then 을 매우 쉽게 처리할 수 있다.

async는 함수 뒤에서만 선언할 수 있으며, 이 함수 자체가 Promise가 되어버린다. 그래서 이 함수를 실행할 때 Promise처럼 뒤에서 then을 붙일 수 있다. (함수를 실행하면 그 자리에 Promise인스턴스가 남는다.)

async function hardwork() {
	1 + 1
}

hardwork.then(function(){
	console.log('add success');
})

이렇게 promise를 사용할 때 처럼 then을 붙여 hardwork()함수가 성공한 뒤에 뭔가를 실행시킬 수 있다.

async는 성공만 판정할 수 있다는 단점이 있다. Promise()를 이용할 때 처럼 성공/실패 case를 구분할 수 없다.

▶️ then() 대신 사용하는 await

  async function adding(){
    var hardwork = new Promise((resolve, reject)=>{
      var result = 1 + 1;
      resolve();
    });

    hardwork.then();
  }

  adding();

hardwork.then() 성공시 특정 코드를 실행할 수 있다.

이때 hardwork.then() 부분이 너무 복잡해서 보기 싫으시면 await 키워드를 사용하면 된다.

  async function adding(){
    var hardwork = new Promise((resolve, reject)=>{
      var result = 1 + 1;
      resolve();
    });

    var result = await hardwork;
  }

  adding();

await는 .then() 과 유사한 문법으로, 해당 Promise를 기다린 다음 완료되면 결과를 변수에 담아달라는 의미이다.

  async function adding(){
    var hardwork = new Promise((resolve, reject)=>{
      var result = 1 + 1;
      resolve(result);
    });

    var result = await hardwork;
    console.log(result);
  }

  adding();

이렇게 연산결과를 출력하고 싶으면 성공함수에 파라미터를 담아주면된다.

▶️ await의 실패처리

    async function adding(){
      var hardwork = new Promise((resolve, reject)=>{
        var result = 1 + 1;
        reject(result);
      });

      var result = await hardwork;
      console.log(result)
    }

    adding();

promise가 실패하는 코드인데, 이경우 promise가 실패할 경우 await hardwork라는 코드는 에러가 나고 코드 실행을 멈춘다. 그 순간 아래에 있는 코드는 실행할 수 없는 것이다.

    async function adding(){
      var hardwork = new Promise((resolve, reject)=>{
        var result = 1 + 1;
        reject(result);
      });

      try {var result = await hardwork;}
      catch {console.log(result)}//promise가 실패할 경우 실행할 코드
    }

    adding();