promise 장점

자바스크립트는 비동기 함수 콜백과 promise, setTimeout 의 개념이 들어오면서 코드 분석이 매우 어려워졌습니다. 하지만, 그 중 promise 는 아직 생소해서 그런지 어렵게만 느껴지네요.ㅜ

 

promise 는 쉽게 말해 실행됐는데 결과값을 나중에 다시 쓸 수 있는 객체입니다. 이것이 promise 의 가장 큰 장점이고 필요한 이유가 됩니다.

 

 

promise → async / await 안되는 이유

앞에서 promise 를 async / await 으로 바꿔 코드를 줄일 수 있다고 했는데, 모든 promise 들을 async / await 으로 바꿀 수 있음 좋겠지만, 그렇지 않습니다. 이번엔 바꿀 수 없는 경우들을 보며 왜 그런지도 알아보겠습니다.

 

예제를 보며 설명하겠습니다.

 

서버에서 요청을 받을 때 axious 와 같은 것들을 많이 사용합니다.

 

// (실행됐지만 결과값을 부르지 않고, 다른 짓 하는 코드)
const p1 = axios.get('서버주소1')
const p2 = axios.get('서버주소2')
const p3 = axios.get('서버주소3')
const p4 = axios.get('서버주소4')
const p5 = axios.get('서버주소5')
const p6 = axios.get('서버주소6')

// (다른 코드)

// 부르고 싶을 때
Promise.all([p1, p2, p3, p4, p5, p6]).then((results) => {});

 

우선, get 을 통해 원하는 서버에서 데이터를 쭉 받아옵니다. 그와 동시에 p1 입장에서는 p2 ~ p6 가 다른 짓을 하는 코드가 되고, p2 입장에선 그 밑에 있는 p3 ~ p6 가 다른 짓을 하는 코드가 됩니다.

 

그렇겠죠? 원래 값을 바로 받고 싶다면 p1 은

 

const p1 = axious.get('서버주소1').then(데이터1) => {});

 

와 같이 바로 결과값을 부를텐데 Promise 를 통해 위 코드와 같이 부르고 싶을 때 Promise.all 로 그 값을 모두 한 번에 부를 수 있습니다. 

---

Promise.all 와 Promise.allSettled

Promise.all 

 

예를 들어 p1 ~ p6 에서 p3 이 문제가 생길 때 catch 를 불러오게 됩니다. 이 말은 즉, 문제가 없는 나머지 p1, p2, p4, p5, p6 또한 catch 를 불러오게 된다는 겁니다.  이 점이 Promise.all 의 단점입니다.

 

Promise.all([p1, p2, p3, p4, p5, p6]).then((results) => {}).catch((error) => {});

---

Promise.allSettled

 

이를 보완하기 위해 이전에 없던 Promise.allSettled 가 나오게 됩니다.

 

Promise.allSettled([p1, p2, p3, p4, p5, p6]).then((results) => {
  // 실패한 것만 필터링해서 다시 시도
}).catch((error) => {});

 

여전히 p3 가 문제가 있다고 가정하고 Promise.allSettled 로 바꿔주었을 때, results 에 p1 성공, p2 성공, p4 성공, p5 성공, p6 성공 해서 결과값 받을 수 있게 전부 표시해주고, p4 는 실패해 catch 를 불러와 error 를 결과값으로 받게 합니다.

 

하지만 위 코드에서 실패한 p3 만 if 문 등을 통해 필터링해 다시 시도하게 해줄 수도 있습니다.

 

이 때문에 all 은 잘 사용하지 않고, allSettled 를 주로 사용하게 될 겁니다.

---

finally

 

추가로 finally 가 있습니다. 

 

Promise.allSettled([p1, p2, p3, p4, p5, p6]).then((results) => {
  // 실패한 것만 필터링해서 다시 시도
}).catch((error) => {}).finally(() => {});

 

finally 는 then 이 됐든 catch 가 됐든 최종적으로 finally 가 실행되게끔 하는 역할을 합니다.