자바스크립트 Promise 개념 및 4가지 메소드 알아보기

 

 

자바스크립트 Promise 의 기본 개념에 대해 이미 알고 계시다면, Promise 의 특정 영역 중 하나인 "Promise 동시성"에 대한 기본 내용을 알아보겠습니다. Promise 동시성은 겹치는 작업을 용이하게 하는 네 가지 다른 메소드로 구성됩니다.

 

Promise.all()

 

파티를 시작하기 전에 모든 친구가 도착할 때까지 기다리는 것과 비슷합니다. 모든 친구가 오면 성공하고, 한 명이라도 오지 못하면 실패합니다.

 

const p1 = Promise.resolve(5);
const p2 = 33;
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'Some text...');
});

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

// Log: [5,33,"Some text..."]

 

전부 성공이라 로그가 찍힙니다. 만약에 1개라도 reject 이면 반환값이 없습니다.

 

Promise.allSettled()

 

할 일 목록을 만들어 완료되었는지 여부와 관계없이 모든 항목을 확인하는 것과 비슷합니다. 일부 작업이 실패해도 괜찮습니다. 그냥 모든 작업의 상태를 알고 싶은 것뿐입니다.

 

const p4 = Promise.resolve(9);
const p5 = new Promise((resolve, reject) =>
  setTimeout(reject, 4000, 'Some text...'),
);

const promises = [p4, p5];

Promise.allSettled(promises).then((results) =>
  results.forEach((result) => console.log(result.status)),
);

// Log: "fullfilled"
// Log: "rejected"

 

reject 이 된것도 모두 전부 반환받습니다. 그래서 rejected 문구가 보입니다.

 

Promise.any()

 

여러 개의 일자리에 지원한다고 상상해보죠. 여러 회사 중 첫 번째로 수락해 주는 회사에서 일자리 제안을 받는 것과 비슷합니다. 다른 회사에서 거절당해도 상관없습니다. 그냥 한 곳에서 일자리 제안을 받아 기뻐하는 것입니다.

 

const p6 = Promise.reject(0);
const p7 = new Promise((resolve) => setTimeout(resolve, 6000, '1st'));
const p8 = new Promise((resolve) => setTimeout(resolve, 7000, '2nd'));

const promises2 = [p6, p7, p8];
Promise.any(promises2).then((value) => console.log(value));

// Log: "1st"

 

제일 빠른 p6 에서 거절해서 그 다음 응답이 빠른 p7 에서 합격되어 바로 ok 한 사항입니다. p8 도 합격이지만 p7 보다 늦게 도착되어 제외되었습니다.

 

Promise.race()

 

친구들 간의 경주처럼 누가 먼저 작업을 완료하는지 보는 것과 비슷합니다. 결과는 먼저 작업을 성공하든 실패하든 상관없이 누가 먼저 완료했는지에 따라 결정됩니다.

 

const p9 = new Promise((resolve, reject) => {
  setTimeout(resolve, 9000, 'Initial');
});

const p10 = new Promise((resolve, reject) => {
  setTimeout(resolve, 8000, 'Secondary');
});

Promise.race([p9, p10]).then((value) => {
  console.log(value);
});

// Log: "Secondary"

 

제일 빠른 응답은 Secondary 이네요. 

 

CodePen

Using Promise Concurrency Methods

 

 

 

참고사이트

 

 

https://mailchi.mp/webtoolsweekly/web-tools-538?e=d377ebf0ee

Web Tools #538 - JS Utilities, JSON, Database Tools, Uncats