[자바스크립트] 프로미스 - promise hell

프로미스 객체를 돌아보며...

지금까지 프로미스 객체에 대해서 탄생 배경부터 기본 사용법, 체이닝, 정적 메소드 등을 공부하면서 프로미스 객체에 대해서 보다 깊게 알게 되고, 사용 방법에 대해서도 보다 익숙해졌다.

• 프로미스 개념과 기본 사용법
• 프로미스 핸들러
• 프로미스 체이닝
• 프로미스 정적 메소드

공부하며 할 수록, 콜백 함수에 비해 훨씬 사용하기도 편하고 코드도 간결해짐으로써 가독성 또한 좋아지는 것을 볼 수 있었다. 하지만 콜백 지옥이 끝이 아니었다면?? 그를 해결하기 위해 나온 프로미스 또한 지옥이 존재한다면...

 

 

 

프로미스 지옥

처음 프로미스의 개념에 대해서 배울 때 프로미스 객체는 콜백 지옥을 극복하기 위한 문법이라고 배웠다. 하지만, 이런 프로미스 또한 지옥이 있다고 하니 자바스크립트를 공부하는 입장에서는 많이 당황스러울 것이다.

 

하지만 프로미스 지옥 또한 콜백 지옥 못지 않게 프로미스의 then() 메소드가 지나치게 반복되면 코드가 길어지고 가독성이 많이 떨어질 수 있다.

 

아래의 코드를 살펴보자.

fetch("https://api.github.com/users")
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Network Error");
    }
  })
  .then((users) => {
    return users.map((user) => user.login);
  })
  .then((logins) => {
    return logins.join(", ");
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

 

fetch 함수를 이용하여 깃허브 api에서 유저 정보를 가져오고, then 메소드를 여러번 체이닝하여 유저들의 로그인 이름을 쉼표로 구분한 문자열로 만들어 출력하는 비동기 작업을 수행하는 코드이다.

 

동작 자체는 문제 없이 동작하지만, 위 코드와 같이 then이 계속 이어지게 되면, 각 핸들러가 어떤 값을 반환하는지 파악하기 어려워지게 된다. 또한, catch 메소드가 마지막에 한번만 사용되어 있기 때문에, 중간에 발생할 수 있는 에러나 예외 상황에 대응하기 어렵다.

 

그렇다고 중간 중간 catch문이 들어가게 되면, 그 또한 코드를 복잡하게 만들고 해당 에러가 어디에서 발생한 에러인지 파악하기 어려워지고 코드의 가독성 또한 현저히 떨어지게 되는 것이다.

 

 

 

프로미스 지옥을 해결하기 위한 문법??

콜백 지옥을 해결하기 위해 프로미스 문법이 나온 것처럼 프로미스 지옥을 해결하기 위해 자바스크립트에서 ES8에 async / await 문법이 등장하였다.

 

해당 문법은 프로미스를 기반으로 하지만 then과 catch 메소드를 사용하지 않고 비동기 작업을 진행할 수 있다. 해당 문법을 사용하여 위의 예제 코드를 변경하면 다음과 같다.

try {
    const response = await fetch("https://api.github.com/users");
    
    if (response.ok) {
      const users = await response.json();
      const logins = users.map((user) => user.login);
      const result = logins.join(", ");
      console.log(result);
    } else {
      throw new Error("Network Error");
    }
    
} catch (error) {
	console.error(error);
}

 

어떻게 동작하는지는 잘 모르겠지만, .then으로 이어지는 가독성을 떨어뜨리는 핸들러를 없애버리고 1개의 라인으로 비동기 코드들을 구성했음을 볼 수 있다. 그렇기 때문에, 코드가 간결해지고 가독성 또한 좋아졌으며, 코드를 파악하기가 훨씬 용이해졌다.

 

이러한 aync / await 를 어떻게 사용하는지는 이 후 포스팅을 참고하기 바란다.

 

 

 

reference : Inpa dev