프로미스 (Promise)

프로미스

프로미스에 대해 설명해주세요.

프로미스는 가독성이 떨어지는 콜백지옥을 유도할 수 있는 콜백 방식보다 자바스크립트 비동기 처리를 편하게 하기 위해 등장한 객체입니다. 주로 서버에서 받아온 데이터를 화면으로 보여주기 위해 프로미스를 사용합니다.

프로미스는 pending, fulfilled, rejected로 3가지 상태를 가집니다.
프로미스가 성공적으로 되면 then()를 통해 다음 동작을 처리하고,
프로미스가 실패하면 then()의 두 번째 인자나 catch()를 통해 에러를 처리할 수 있습니다.

다만 프로미스 체이닝이 길어지면 가독성이 떨어진다는 단점이 있습니다.

더 나아가기

프로미스 정적 메소드

Promise.all()

// 1번 직원 정보
const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('https://learn.codeit.kr/api/members/2').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('https://learn.codeit.kr/api/members/3').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보]
  });

all 메소드는 이렇게 아규먼트로 들어온 배열 안에 있는 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때까지 기다립니다.

Promise.allSettled()
Promise.allSettled() 메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환합니다.
일반적으로 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용합니다.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo'),
);
const promises = [promise1, promise2];

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

// Expected output:
// "fulfilled"
// "rejected"

Promise.any()
any는 rejected는 무시하고 가장 먼저 fullfiled 된 요소를 체크한다.

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"