[ JS ] Promise VS async await 비교

 

 

자바스크립트에서 비동기 작업을 처리하는 주요 방식인 Promise와 async/await에 대해 비교해보려고 한다. 평소 작업을 하면서 둘을 사용하는데, 정확히 어떻게 다른지 차이점과 특징을 비교해보려고 한다. (둘 다 ES6+ 이후에 도입되었다.)

 

 

---

 

 

1. 문법
   - Promise: `.then()`, `.catch()`, `.finally()` 메서드를 체인으로 연결하여 사용.
   - async/await: 더 동기적인 코드 스타일이며 `try/catch` 구문으로 에러를 처리한다.

 

 

2. 가독성
   - Promise: 복잡한 비동기 로직에서는 중첩된 `.then()`으로 인해 "콜백 지옥"과 유사한 상황이 발생할 수 있다.
   - async/await: 일반적으로 더 읽기 쉬운 직관적인 코드를 작성할 수 있다.

 

 

3. 에러 처리
   - Promise: `.catch()` 메서드를 사용하여 에러를 처리한다.
   - async/await: 일반적인 `try/catch` 구문을 사용하여 에러를 처리한다.

 

 

4. 병렬 실행
   - Promise: `Promise.all()`, `Promise.race()` 등의 메서드를 통해 여러 Promise를 병렬 처리할 수 있다.
   - async/await: 병렬 처리를 위해서는 추가적인 작업이 필요하다. (예: `Promise.all()`과 함께 사용)

 

 

5. 브라우저 지원
   - Promise: 대부분의 최신 브라우저에서 지원.
   - async/await: Promise보다 나중에 도입되어, 상대적으로 더 최신 브라우저에서 지원.

 

 

6. 기반 기술
   - async/await는 Promise를 기반으로 작동하기 때문에 async 함수는 항상 Promise를 반환한다.

 

Promise와 async/await 의 사용방법은 다음과 같다.

// Promise
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}


// async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

이 예시를 보면, async/await가 더 동기적인 코드 스타일을 제공 및 에러 처리에 대해 더 직관적임을 알 수 있다.

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

Promise - MDN

async function - MDN