[Javascript - ES8] async, await / 기존 Promise()와 비교

ES8에 소개된 async와 await를 사용하여 기존 Promise, then보다 더욱 깔끔하게 코드를 작성할 수 있게 되었다.

 

 

목차

1. 기존 Promise() 방식
2. async, await 방식

 

 

 

 

 

1. 기존 Promise() 방식

 

const $img = document.querySelector('#img');
 
const promise = new Promise((resolve, reject) => {
  $img.addEventListener('load', function() { 
    resolve(); 
  });
  $img.addEventListener('error', function() { 
    reject(); 
  });
})
 
promise.then((result) => {
  console.log("성공!")
}).catch(() => {
  console.log("실패!");
})

 

 

 

 

 

2. async, await 방식

async를 함수 앞에 붙이면 await가 then 기능을 대신할 수 있다. try와 catch를 사용하면 실패 시 에러가 나서 모든 코드가 멈추는 현상을 방지할 수 있다.

 

const $img = document.querySelector('#img');
 
async function imgCheck() {
  const promise = new Promise((resolve, reject) => {
    $img.addEventListener('load', function() { 
      resolve(); 
    });
    $img.addEventListener('error', function() { 
      reject(); 
    });
  })
  
  try {
    let result = await promise;
    console.log("성공!" result);
  } catch {
    console.log("실패!")
  }
  
}
 
imgCheck();