Callback Hell 탈출

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)

이 블로그 기록은 개인 공부용 기록입니다.