[F-Lab 모각코 챌린지 - 58일차] - Promise

Big One·2023년 7월 7일
0

F-Lab

목록 보기
31/69

Promise란?

Promise 객체는 비동기 작업의 완료 또는 실패와 그 결과 값을 나타내는 객체입니다.
기본적으로 promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체입니다.

Promise를 사용해야하는 이유

  • 콜백 지옥에서 벗어날 수 있다.
  • 가독성이 좋다.

상태

  • 대기(pending): 이행하지도, 거부하지도 않은 초기 상태
  • 이행(fulfilled): 연산이 성공적으로 완료됨
  • 거부(rejected): 연산이 실패함

대기중인 프로미스는 값과 함께 이행할수도 거부될 수도 있습니다.

메서드

각 메서드별로 어떤 결과를 반환해주는지 메서드가 무슨 역할을 하는지 알아보겠습니다.

Promise.all

인자로 이터러블 객체가 들어오고 모든 프로미스를 이행한 후 Promise를 반환합니다. 하나라도 reject시 거절되며 거절 사유를 반환해줍니다. 이에비해, Promise.allSettled()는 이행/거부 관계없이 모든 프로미스가 완료될 때까지 기다립니다.

일반적으로 다음 코드를 계속 실행하기전에 서로 연관된 비동기 작업 여러개가 모두 이행되어야 하는 경우에 사용됩니다.

예제

const promise1 = Promise.resolve(1);
const promise2 = 2;
const promise3 = new Promise((resolve, reject) => {
	setTimeout(() => { 
		resolve('promise3'); 
	}, 500);
});

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

const promise4 = Promise.reject('거절합니다!');
Promise.all([promise1, promise2, promise3]).then((values) => {
	console.log(values);
}); // '거절합니다!'

Promise.any

인자로 이터러블을 받고 가장 빠르게 이행된(resolve) 프로미스를 반환해줍니다. (선착순!)
모든 프로미스가 거절되면 거절을 반환하지만 하나의 프로미스라도 이행되면 이행된 프로미스를 반환해준다.

문법

Promise.any(iterable);

예제

const promise1 = new Promise((resolve, rejcet) => {
	setTimeout(resolve, 500, 'promise1');
});
const promise2 = new Promise((resolve, rejcet) => {
	setTimeout(resolve, 1000, 'promise2');
});
const promise3 = new Promise((resolve, rejcet) => {
	setTimeout(resolve, 1500, 'promise3');
});

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

catch, finally

  • catch: 프로미스가 거부될 때 호출 될 함수를 예약합니다.
  • finally: 프로미스 이행, 거부 여부와 관계없이 마지막에 무조건 수행할 함수를 예약합니다.

예제

const checkMail = () => {
	const promise1 = new Promise((resolve, reject) => {
		if(Math.ceil(Math.random() * 10)> 5){
			return resolve('Mail has arrived');
		};
			return reject(new Error('Failed to arrive'));
	});
	return promise1;
};

checkMail().then((mail) => {
	console.log(mail);
}).catch((error) => console.log(error)).finally(() => console.log('finished!'));

race

인자로 이터러블을 받고 가장 빠르게 이행된(resolve) 프로미스를 반환해줍니다. (선착순!)
Promise.any와 다른 점은 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);
});

학습할 키워드

  • try~catch vs Promise catch
  • Promise.all 의 동기성/비동기성 예제
  • async / await
profile
이번생은 개발자

0개의 댓글