JavaScript - Promise와 async, await 비교

Promise와 async, await 구문 모두 자바스크립트에서 비동기 처리를 위해 사용됩니다.

 

Promise와 async, await을 비교해 봅시다.

 

 

Promise

 

 

프로미스는 3가지 상태(state)가 존재합니다.

 

• Pending : 이벤트 발생 전 초기 상태
• Resolved : 비동기 처리가 정상적으로 완료된 상태
• Rejected : 비동기 처리 중 오류 발생 혹은 실패

 

각각의 상태에 따라 필요한 작업을 코딩할 수 있습니다.

 

 

Promise의 에러 처리 (핸들링 )

 

 

성공적으로 처리된 비동기 작업은 resolved promise라 부를 수 있고. then() 메서드로 처리

실패하거나 오류가 발생한  비동기 작업은 rejected promise이고. catch() 처리

 

비동기 처리 이후에 실행할 코드는. finally() 메서드로 처리합니다.

. finally() 메서드는 promise가 어떤 상태로 처리되던 상관없이 한 번 실행됩니다.

 

예제

function promise() {
  const promise = new Promise( function(resolve, reject) {
    const str1 = "helloWorld";
    const str2 = "helloWorld";
    if (str1 === str2) {
      resolve(); 
    } else {
      reject();
    }
  });

  promise
    .then( function () {
      console.log("Promise resolved");
    })
    .catch (function() {
      console.log("Promise rejected");
    })
    .finally( function() {
      console.log("Finally works once");
    });
}

promise();

 

 

async / await

 

 

• promise를 이용하여 비동기 처리를 하기 위한 키워드
• 기본적으로 promise를 위한 문법적 설탕
• promise 코드를 더욱 이해하기 쉽게 표현하기 위한 wrapper
• 비동기 코드를 동기/순차적인(synchronous/procedural) 코드로 보이게 하여 사람이 이해하기 쉬워집니다.

 

문법적 설탕 : 더 간결하게 표현하여 사람이 이해하기 쉬운 문법.

 

await은 async 함수 내부에서만 사용 가능합니다.

await은 async 함수가 resolve promise 혹은 reject promise를 반환할 때까지 기다립니다. 

 

 

async / await 에러 핸들링

 

 

비동기 처리가 성공적으로 수행된 resolved promise는 try

비동기 처리가 실패하거나 오류가 발생한 rejected promise는 catch

promise 처리 후에 실행할 코드는 finally 메서드 내부에 작성하면 됩니다.

 

예제

const async_promise = function () {
  const p = new Promise( function (resolve, rejected) {
    const str1 = "helloWorld";
    const str2 = "helloWorld";
    if (str1 == str2) {
      resolve("Resolved promise");
    } else {
      reject("Rejected promise")
    }
  });

  return p;
}

async function demo() {
  try {
    let promise = await async_promise();
    console.log(promise);
  } catch (error) {
    console.log(error);
  }
}

demo();​

 

 

 

Promise와 async/ await 비교

 

 

	Promise	async / await
1	미래에 완료될것이 보장된 작업의 state를 대표하는 객체	Promise의 가독성을 높이기 위한 문법적 설탕. 비동기 구문인 Promise를 동기적으로 실행되는 코드처럼 보이게하여 가독성을 높인다.
2	Promise는 "Pending, Resolved, Rejected"의 세가지 상태(state)를 가진다	상태(state)가 없다. Async 함수는 rejected 혹은 resolved 된 promise를 반환할뿐이다.
3	fxn1 함수를 promise 이후에 실행하고 싶은 경우, promise.then(fxn1)함수는 fxn1 함수를 callback 체인에 연결시킨 후 현재 함수를 계속 실행시킨다.	fxn1 함수를 await 이후에 실행시키고 싶은 경우, await X() 함수가 현재 함수 실행을 suspend 시키고 fxn1 함수를 실행시킨다.
4	에러 핸들링은 .then(), .catch() 메소드로 처리	에러 핸들링은 .try() .catch() 메소드로 처리
5	Promise 체인(여러개의 중첩된 promise)은 이해하기 어려운 경우가 있다.	promise 체인과 비교해서 이해하기 쉽다.

 

 

출처

https://www.geeksforgeeks.org/difference-between-promise-and-async-await-in-node-js/