JAVASCRIPT Promise

이준규·2022년 5월 5일
0

자바스크립트

목록 보기
2/6


Promise

  • 비동기 작업의 상태와 결과 값

Promise의 상태

  • pending 대기
  • fulfilled 완료
  • rejected 실패
  • 완료와 실패 상태는 settled 됐다고 한다.

then...catch

const promise1 = new Promise((resolve, reject) => {
  resolve('foo');
  // reject('foo');
});

promise1.then((value) => {
  console.log(value, "_resolve");
}).catch((value) => {
  console.log(value, "_reject");
})

Method

Promise.all

  • 병렬 실행
  • 매개변수 Array와 같이 순회 가능한(iterable) 객체.
  • 반환 값
    • if 매개변수 객체가 비어있으면 settled promise
    • else if 객체에 promise가 없으면 비동기적으로 이행하는 promise
    • else
      • pending promise
      • 어떤 promise 가 reject 할 때 즉시 비동기적으로 이행/거부
      • 매개변수 객체 순서와 일치하며 완료순서는 상관 없다.
  • 하나라도 reject 되면 즉시 전부 reject
  • reject은 첫 번째로 reject 된 이유를 사용한다.
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'foo');
});
const promise4 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'boo');
});

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

expected output: foo _ reject


Promise.allSettled()

  • 모든 promise 를 settled(이행/거부) 시킨다
  • 성공 여부와 관계없이 동작시켜야 할 때 사용.
  • promise.all() 은 하나가 거부되면 거부됨.
  • 반환값
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promise3 = Promise.resolve(3);
const promises = [promise1, promise2, promise3];

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

"fulfilled"
"rejected"
"fulfilled"
순서대로 출력됨

  • await 사용시
const values = await Promise.allSettled([
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  99,
  Promise.reject(new Error('an error'))
])
console.log(values)

// {status: "fulfilled", value: 33},
// {status: "fulfilled", value: 66},
// {status: "fulfilled", value: 99},
// {status: "rejected", reason: Error: an error}
완료순서로 반환됨


Promise.any()

  • promise 중 하나만 이행됐을 때 그 결과 하나를 반환한다.
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));
  • 모든 promise 가 reject 되면, AggregateError 반환.
  • 거부된 Promise 가 있어도 가장 먼저 이행된 결과 반환함.

Promise.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
});
  • 빈 배열을 순환하면 영원히 pending 상태 반환.

Promise.prototype.finally()

  • 반환된 이후 실행 (이행/거부된 이후)

참조) MDN

profile
백엔드

0개의 댓글