Front end/javaScript
Callback Hell 탈출
jinpark1992
2023. 11. 26. 22:42
Callback Hell 을 탈출하기 위해서는 Promise를 사용해야함.
Promise란 CallBack Hell 을 탈출하기 위한 객체다.
- 기존 CallBack 함수
더보기
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
// 주문하기
function orderAPI(doNext) {
setTimeout(() => { // 비동기 함수
console.log("[주문] 완료!");
doNext();
}, 1000);
}
// 결제하기
function paymentAPI(doNext) {
setTimeout(() => {
console.log("[결제] 완료!");
doNext();
}, 1000);
}
// 배달하기
function deliveryAPI(doNext) {
setTimeout(() => {
console.log("[배달] 완료!");
doNext();
}, 1000);
}
// 리뷰작성
function reviewAPI(doNext) {
setTimeout(() => {
console.log("[리뷰] 완료!");
doNext();
}, 1000);
}
콜백을 활용한 비동기처리: 콜백 지옥 발생..
코드 파악이 어려움: 코드 흐름이 눈에 잘 들어오지 않음
orderAPI(() => {
paymentAPI(() => {
deliveryAPI(() => {
reviewAPI(() => {
console.log("== END ==");
});
});
});
});
2. 프로미스(Promise)
- 콜백 지옥을 개선하는 객체
- 비동기 처리 흐름을 파악하기 좋음
👉 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
프로미스 만들기
const promise1 = new Promise((resolve, reject) => {
// 비동기 처리
setTimeout(() => {
if (Math.random() < 0.5){ // 0.5확률보다 작으면 즉 반반 확률
resolve("성공");
} else {
reject("실패");
}
}, 1000);
});
// console.log(promise1);
// 프로미스 호출
// promise.then(성공시_수행할_resolve_콜백)
// .catch(실패시_수행할_reject_콜백)
// .finally(결과에_상관없이_수행될_콜백);
promise1.then((result) => {console.log(result)}) // 위의 resolve 값을 가져옴 (성공)
.catch((err) => {console.log(err)}) // 위의 reject 값을 가져옴 (실패)
.finally(() => {console.log("== 끝 ==")}); // 성공 실패 상관없이 실행
- CallBack Hell 탈출을 위해 Promise 함수를 이용하여 개선
더보기
// 3. 기존 콜백을 프로미스로 개선하기
// - 콜백 지옥은 기존 콜백을 직접호출해서 생김
// - 프로미스로 감싸면, 콜백 지옥을 없앨 수 있음
// 주문하기
function orderAPI() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.8) {
console.log("[주문] 완료!");
resolve();
} else {
reject("[주문] 실패..");
}
}, 1000);
});
}
// 결제하기
function paymentAPI() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.8) {
console.log("[결제] 완료!");
resolve();
} else {
reject("[결제] 실패..");
}
}, 1000);
});
}
// 배달하기
function deliveryAPI() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.8) {
console.log("[배달] 완료!");
resolve();
} else {
reject("[배달] 실패..");
}
}, 1000);
});
}
// 리뷰작성
function reviewAPI() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.8) {
console.log("[리뷰] 완료!");
resolve();
} else {
reject("[리뷰] 실패..");
}
}, 1000);
});
}
orderAPI().then(() => {return paymentAPI()}) // 성공
.then(() => {return deliveryAPI()})
.then(() => {return reviewAPI()})
.catch((err) => {console.log(err)}) // 실패
.finally(() => {console.log("== 끝 ==")});
출저: 홍팍 (https://www.youtube.com/@hongpark)
이 블로그 기록은 개인 공부용 기록입니다.