[TIL; 2d] Promise의 정적 메서드 / as const VS Object.freeze VS enum / etc

Promise의 정적 메서드

먼저 Promise는 비동기 작업의 결과를 나타내는 객체다.

pending, fulfilled, rejected로 나뉘며 이러한 결과를 then, catch, finally 메서드를 통해 반환한다.

 

Promise는 비동기 작업의 동시성을 용이하게 하기 위해 4가지 정적 메서드를 제공한다.

Promise.all, Promise.allSettled, Promise.any, Promise.race 이렇게 4가지다.

 

원래는 앞의 2개만 정리하려고 했는데 궁금해서 그냥 뒤의 2개도 알아봤다.

 

Promise.all

전달한 모든 Promise가 성공했을 때 결과를 반환한다.

모든 Promise가 fulfilled하면 각 Promise의 결과를 배열로 반환한다.

이 순서는 완료된 순서가 아니라 입력된 순서를 따른다.

만약 1개라도 rejected되면 즉시 에러를 반환하며 중단된다.

/* 성공 */

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then((results) => {
    console.log(results); // [1, 2, 3]
  })
  .catch((error) => {
    console.error(error);
  });
  

/* 실패 */
const p1 = Promise.resolve(1);
const p2 = Promise.reject("에러 발생");
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error); // "에러 발생"
  });

 

Promise.allSettled

위에서 말한대로 all은 배열에 있는 Promise 중 하나라도 rejected 되면 다른 것들이 성공했어도 catch로 넘어간다.

그렇기 때문에 이 메서드는 전달된 모든 Promise의 결과를 기다린 후,

성공이든 실패든 상관 없이 각각의 결과 상태를 배열로 반환한다.

 

만약 실패 가능성이 있는 작업이라면 all보다 allSettled를 쓰는 방법이 더 나은 것 같다.

이렇게 해야 실패한 것을 다시 처리할 수 있고, 성공/실패를 분기 처리 할 수 있다.

 

(이 부분은 면접 때 api 받아오는 질문에서, 내가 all로 대답했었는데 allSettled를 몰라서 잘못 대답했었다.)

const p1 = "일반 값";
const p2 = Promise.reject("에러");
const p3 = Promise.resolve("성공");

Promise.allSettled([p1, p2, p3])
  .then((results) => {
    console.log(results);
  });


/* 결과 */
[
  { status: "fulfilled", value: "일반 값" },
  { status: "rejected", reason: "에러" },
  { status: "fulfilled", value: "성공" }
]

 

Promise.any

Promise 중 하나라도 fulfilled하면 성공 결과를 반환하고,

모든 Promise가 rejected되었다면 실패 원인을 담은 배열을 담아 AggregateError를 반환한다.

첫 번째로 성공한 Promise의 결과만 반환하기 때문에 아래와 같은 결과가 나온다.

이 메서드는 ES2021에 도입되었다.

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));

// Expected output: "quick"

 

Promise.race

fulfilled이든 rejected든 상관 없이 가장 먼저 완료된 Promise의 결과를 반환한다.

any는 성공한 결과를 반환하는 반면 race는 결과와 무관하다.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%8D%94%EC%9D%B4%EC%83%81-Promiseall-%EC%93%B0%EC%A7%80%EB%A7%90%EA%B3%A0-PromiseallSettled-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

📚 Promise.allSettled 와 Promise.all 비교 정리

 

---

 

 

as const VS Object.freeze

https://velog.io/@taewo/Typescript-as-const%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

[Typescript] as const에 대하여

 

 

비슷하게 느껴졌지만 정리하면 이런 차이가 있다.

enum이 가장 이상적인 것 같다는 생각이 든다.

 

---

 

딥링크

디프만 15기 스위미를 개발했을 때 한 번 나왔던 기능이었는데 잘 몰랐다. (지금도 모름)

앱에서 특정 위치로 보내는 링크를 딥링크라고 하는데, 간단하게 생각했으나 꽤 까다로운 녀석이었다.

유저의 위치나 디바이스 등 생각보다 고려할 것들이 있다.

(예를 들어 웹에서 어떤 링크를 클릭했을 때 앱의 어디로 가야 하는지, 앱이 없으면 어떻게 해야 하는지 등)

 

간단하게 읽어만 본다.

 

참고

https://docs.tosspayments.com/resources/glossary/deep-link

딥링크(Deep Link) | 토스페이먼츠 개발자센터