박규한

woowacourse 6th FE

1 분 소요

💭 예상 질문Permalink

  • Promise에 대해 아는대로 설명해주세요.
    • Promise의 3가지 상태에 대해 설명해 주세요. (pending, fulfilled, rejected)
  • 자바스크립트에서 Promise가 왜 필요한가요?
  • Promise.then()과 Promise.catch()는 각각 어떤 역할을 하나요?
  • 자바스크립트에서 비동기 작업을 어떻게 처리하나요?
promise는 자바스크립트에서 비동기 작업을 관리하는 객체입니다.
pending, fulfilled, rejected 3가지 상태가 존재하며,
비동기 작업이 완료된 후, 해당 작업의 결과에 따라 다음 작업을 미리 정의할 수 있습니다.

🔍 추가 내용Permalink

✅ Promise 객체의 3가지 상태Permalink

pending : 비동기 작업이 아직 완료되지 않은 상태
fulfilled : 비동기 작업이 성공적으로 완료되고, 결과가 반환된 상태
rejected : 비동기 작업이 실패하거나 에러가 발생한 상태


아래와 같이 비동기 작업이 성공할 경우나 실패할 경우에 동작할 코드들을 미리 정의할 수 있다.

const promise = new Promise((resolve, reject) => {
  if (isSuccess) {
    const result = { data: "비동기 작업 성공" };
    resolve(result);
  } else {
    reject(new Error("에러 발생"));
  }
});

promise
  .then((result) => {
    console.log(result); // { data: '비동기 작업 성공' }
  })
  .catch((error) => {
    console.error(error.message); // 에러 발생
  });
  .finally(() => {
  console.log('작업 완료'); // 작업 완료
});

✅ Promise 메서드Permalink

🚨 Promise.all()Permalink

여러 개의 Promise를 병렬로 실행 + 모두 성공했을 때만 성공 결과 반환

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, "foo");
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

> [3, 42, "foo"] # 3초 후 출력

🚨 Promise.race()Permalink

여러 Promise 중 가장 먼저 완료된 Promise의 결과 반환

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

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

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

> two # 1초 후 출력. 5초 후 종료.

🚨 Promise.allSettled()Permalink

성공, 실패 관계없이 모든 Promise의 결과 반환
각각의 Promise의 상태와 값을 배열로 반환
const promise1 = Promise.resolve(3);

const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 1000, "foo")
);
const promises = [promise1, promise2];

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

> { status: 'fulfilled', value: 3 } # 1초 후 한번에 출력
> { status: 'rejected', reason: 'foo' }

🚨 Promise.any()Permalink

입력으로 들어온 여러 프로미스 중 하나라도 이행되면 이를 이행 값으로 하는 프로미스 반환
입력의 모든 프로미스가 거부되면(빈 반복이 전달된 경우 포함) 최종적으로 이 메서드도 거부
const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, "quick"));
const promise3 = new Promise((resolve) => setTimeout(resolve, 3000, "slow"));

const promises = [promise1, promise2, promise3];

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

> quick # 1초 후 출력. 3초 후 종료. 더 빨리 resolve된 quick만 출력

댓글남기기

참고