프로미스를 쓰는 이유

jeongwon yun·2022년 10월 16일
0

Javascript Core

목록 보기
6/13

프로미스 ⇒ 실행은 됐는데 그 결괏값을 나중에 쓸 수 있음!


setTimeout(() => {
	console.log('a');
}, 1000); // 1초 뒤 a 출력

setTimeout 안에 함수를 분리해서 필요할 때 사용할 수 없다.


이 코드는 비동기가 아니다

function calculator(callback, a, b) {
		return callback(a, b);
}
calculator(function(x, y) => { return x + y }, 3, 5); // 8

프로미스를 적용하면 필요할 때 코드나 함수를 사용할 수 있다.

const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve();
	}, 1000);
});

// 다른 코드

promise.then(() => {
	console.log('a');
}); // 1초 뒤 a 출력
const p = new Promise();

// 다른 코드

const c = p.then((res) => {
	console.log(res);
}).catch((error) => {});

axios.get('서버주소1', function(res1) {
	axios.get('서버주소2', function(res2) {
		axios.get('서버주소3', function(res3) {});
	});
});

콜백 지옥은 보기도 안좋지만 결괏값을 바로 써야 한다.

따라서 프로미스를 써서 필요할 때 써보자!

const p1 = axios.get('서버주소1');
const p2 = axios.get('서버주소2');
const p3 = axios.get('서버주소3');
const p4 = axios.get('서버주소4');
const p5 = axios.get('서버주소5');

Promise.all([p1, p2, p3, p4, p5]).then((res) => {}).catch((error) => {});

Promise.allSettled([p1, p2, p3, p4, p5]).then((res) => {
	// 실패한 것만 필터링해서 다시 시도
}).catch((error) => {});

Promise.all 를 통해 결과를 한번에 처리할 수 있다.

Promise.all 단점은 하나라도 에러가 발생하면

캐치 구문으로 넘어간다.

성공한 것들이 의미가 없어지고 어디서 실패했는지 알 수 없다.

그리고 모두 다시 실행해야 한다.


Promise.allSettled 를 사용하면 해결할 수 있다.

각각이 성공했는지를 알려주고 어떤 것이 실패했는지, 그 에러가 무엇인지를

then 에서 알려준다.

Promise.all([p1, p2, p3, p4, p5]).then((res) => {}).catch((error) => {});

위 구문에서 catch는 Promise.all([p1, p2, p3, p4, p5]) 에 대한 catch가 아니라

Promise.all([p1, p2, p3, p4, p5]).then((res) => {}) 에 대한 catch 이다.

0개의 댓글