Promise 패턴과 Async-Await 패턴에 대해서 알아보자

heauchi·2024년 7월 19일

async await promise

When I Was Mentee - Front

목록 보기

8/21

자바스크립트에서 비동기 사용하기

자바스크립트엔진은 동기방식인데, 비동기로 자바스크립트를 사용하고 싶다면. 밑에 소개하는 3가지가 그 방법이다.

CallBack함수
Promise 패턴
Async-Await

왜 비동기를 사용하는가?

사용자 인터페이스의 블로킹을 방지하고(느린 홈페이지 로딩), 네트워크 요청과 같은 시간이 걸리는 작업을 효율적으로 처리할 수 있기 때문이다.

CallBack함수

흔히 비동기를 다룰때 자주 엮여 등장하는 개념이 콜백(callback) 함수이다. 콜백 함수는 자바스크립트의 일급객체 특성을 이용해 함수의 매개변수에 함수 자체를 넘겨, 함수 내에서 매개변수 함수를 실행하는 기법을 말한다.

다만 너무 복잡하게 얽힌 비동기 처리 때문에 콜백 함수 방식은 코드 복잡도를 증가시켜, 개발자가 어플리케이션의 흐름을 읽기 어려워지는 등의 문제가 있을 수 있어 잘못하면 콜백 지옥(callback hell) 에 빠질수 있다는 단점이 있다.

function doSomething(callback) {
  setTimeout(() => {
    console.log("작업 완료");
    callback();
  }, 1000);
}

doSomething(() => {
  console.log("다음 작업 실행");
});

콜백지옥

Promise 패턴

콜백 함수는 정식으로 지원하는 비동기 전용 함수가 아니다. 따라서 자바스크립트의 Promise 객체는 이러한 한계점을 극복하기 위해 비동기 처리를 위한 전용 객체로서 탄생하였다. Promise는 비동기 작업의 성공 또는 실패와 그 결과값을 나타내는 객체이다. 그래서 Promise를 사용하면 비동기 작업을 쉽고 깔끔하게 연결할 수 있게 된다.
프로미스 문법은 .then사용으로 요약할 수 있는데 .then을 중첩하여 비동기 실행을 구성할 수 있다.

function doSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("작업 완료");
      resolve();
    }, 1000);
  });
}

doSomething().then(() => {
  console.log("다음 작업 실행");
});

Async-Await 패턴

하지만 프로미스도 완벽한 해결책은 아니다. 왜냐하면 Callback Hell이 있듯이 지나친 then 핸들러 함수의 남용으로 인한 Promise Hell이 존재하기 때문이다. 즉, 프로미스가 여러 개 연결되면 코드가 길어지고 복잡해질 수 있다는 것이다. 그래서 자바스크립트에는 Async-Await라는 문법이 또한 추가되었다. Async-Await는 프로미스를 기반으로 하지만, 마치 동기 코드처럼 작성할 수 있게 해준다. 비동기 작업을 쉽게 읽고 이해할 수 있게 해주기 때문에 비동기 작업을 처리할 일이 있다면 대게 Async-Await 방식을 쓰는 것이 보통이다.
출처: https://inpa.tistory.com/entry/🌐-js-async#비동기와_콜백_함수 [Inpa Dev 👨‍💻:티스토리]

async function doSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("작업 완료");
      resolve();
    }, 1000);
  });
}

async function main() {
  await doSomething();
  console.log("다음 작업 실행");
}

main();

비교 요약

특징	CallBack	Promise	Async-Await
학습 난이도	낮음	중간	중간
가독성	낮음 (콜백 헬)	중간(프로미스헬)	높음
에러 처리	복잡	간편	가장 간편
코드 중첩	심함	개선됨	없음
코드 길이	짧음	중간	짧음
체이닝	불가능	가능	가능