프로미스(Promise)의 장점

프로미스의 장점

-결과값을 나중에 쓸 수 있다.

 

 

비동기 콜백

setTimeout(() => {
  console.log('a');
}, 1000);

 

 

콜백은 비동기가 아니다.

콜백은 비동기일수도 동기일수도 있다.

 

 

동기콜백 예제

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

 

 

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

//다른작업~~~~~



promise.then(() => {
	console.log('a');
})

 

const promise = new Promise...;

//신나게 딴짓

promise.then((결괏값) => {
	//결괏값 사용
})

 

프로미스의 엄청난 장점

노드도 콜백기반이였다가 최근 프로미스 기반으로 바뀜

---

 

// 프로미스 예시
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')
const p6 = axios.get('서버주소6')


Promise.all([p1, p2, p3, p4, p5, p6]).then((result) => {});

 

 

// 콜백 예시
axios.get('서버주소1', function(데이터1){
	axios.get('서버주소2', function(데이터2){
    	axios.get('서버주소3', function(데이터3){
        
        });
	});
})

콜백헬이 왜 안좋아요?

 보기 안좋아서?도 맞긴한데

근본적인 원인은 결과값을 바로 받아야 해서 문제다

 

 

 

 

---

// 프로미스 예시
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')
const p6 = axios.get('서버주소6')


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

//프로미스 올의 단점
//하나라도 오류나면 나머지도 다 바보가 된다.




// 그래서 나온게 allSettled
Promise.allSettled([p1, p2, p3, p4, p5, p6]).then((result) => {}).catch((error) => {});

 

// 프로미스 극단적 예시
const p1 = axios.post('서버주소1') //송금
const p2 = axios.post('서버주소2') //송금
const p3 = axios.post('서버주소3') //송금
const p4 = axios.post('서버주소4') //송금
const p5 = axios.post('서버주소5') //송금 실패
const p6 = axios.post('서버주소6') //송금


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

//프로미스 올의 단점
//송금 성공한 사람들꺼도 취소하고 다시 보내야한다



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

allSettled 쓰자

 

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

// catch는 
// Promise.all([p1, p2, p3, p4, p5, p6])에 대한 catch가 아니라
// Promise.all([p1, p2, p3, p4, p5, p6]).then((results) => {})에 대한 catch이다