Promise 2

📌 콜백 지옥(Callback Hell)

const f1 = (callback) => {
    setTimeout(() => {
        console.log(“1번째 주문이 완료되었습니다.”);
        callback()
    }, 1000)
}

const f2 = (callback) => {
    setTimeout(() => {
        console.log(“2번째 주문이 완료되었습니다.”);
        callback()
    }, 3000)
}

const f3 = (callback) => {
    setTimeout(() => {
        console.log(“3번째 주문이 완료되었습니다.”);
    }, 2000)
}

f1(function(){
    f2(function(){
        f3(function(){
            console.log(“끝”)
        })
    })
})

• 위와 같이 콜백함수를 겹쳐 depth(깊이)가 깊어지는 형태의 콜백 함수를 콜백 지옥 이라고 한다.
• 이를 프로미스를 사용하여 코드를 수정해 보겠다.
• 코드의 동작 결과는 위 코드와 프로미스가 완전히 동일하다.

const f1 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(“1번 주문 완료”);
        }, 1000);
    });
};

const f2 = (message) => {
    console.log(message)
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(“2번 주문 완료”);
        }, 3000);
    });
};

const f3 = (message) => {
    new Promise((res, rej) => {
        setTimeout(() => {
           res(“3번 주문 완료”);
        }, 2000);
    });
};

func1()
    .then((res) => func2(res))
    .then((res) => func3(res))
    .then((res) => console.log(res))

// 결과
(1초 후) 1번 주문 완료
(3초 후) 2번 주문 완료
(2초 후) 3번 주문 완료

• 다시한번 강조하면 then은 Promise 객체가 반환하는 result 프로퍼티의 값(value)을 결과로 전달받아 다음 동작을 실행시킨다.
• 내가 이해한건 콜백 지옥에서 함수의 인자로 함수를 받는 것과 같이 .then을 통해 함수를 호출하고 여기에 res 즉 result값을 인수로 받는 함수 func2()를 호출한다.
• 이 과정을 반복하는 코드이다.
• 실제 “1번 주문 완료”가 찍히는 시점은 func2()가 호출 된 이후 시점이며, 때문에 마지막 함수 호출 시 console.log()로 “3번 주문 완료”를 찍어주어야 한다.
  내가 이해한 로직이다. 정답이 아닐 수도 있다..

📌 프로미스 체이닝

• 가독성 향상: 비동기 작업을 순차적으로 나열하여 코드의 가독성을 높입니다.
• 에러 처리: .catch() 메서드를 사용하여 체인 전체에서 발생하는 에러를 한 곳에서 처리할 수 있습니다.
• 유연성: 각 단계에서 새로운 프로미스를 반환하여 복잡한 비동기 작업을 유연하게 처리할 수 있습니다.

  출처 : 마이크로소프트 코파일럿

// catch와 finally까지 사용함
const f1 = () => {
     return new Promise((res, rej) => {
         setTimeout(() => {
             res(“1번 주문이 완료되었습니다.”);
         }, 1000);
     });
};

const f2 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(() => {
             res(“2번 주문이 완료되었습니다.”);
         }, 3000);
    });
};

const f3 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(() => {
             res(“3번 주문이 완료되었습니다.”);
        }, 2000);
    });
};

console.log(“시작”)
f1()
    .then((res) => f2(res))
    .then((res) => f3(res))
    .then((res) => console.log(res))
    .catch(console.log)
    .finally(() => {
        console.log(“끝..”);
        }
    );

🔔 만약 reject를 반환하면 어떻게 될까?

=> 두 번째 프로미스가 reject를 반환하도록 코드를 수정

const f1 = () => {
     return new Promise((res, rej) => {
         setTimeout(() => {
             res(“1번 주문이 완료되었습니다.”);
         }, 1000);
     });
};

const f2 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(() => {
             rej(“xxx”);    // 이 부분이 reject로 수정됨
         }, 3000);
    });
};

const f3 = (message) => {
    console.log(message);
    return new Promise((res, rej) => {
        setTimeout(() => {
             res(“3번 주문이 완료되었습니다.”);  
        }, 2000);
    });
};

console.log(“시작”)
f1()
    .then((res) => f2(res))
    .then((res) => f3(res))
    .then((res) => console.log(res))
    .catch(console.log)
    .finally(() => {
        console.log(“끝..”);
        }
    )

// 결과
시작
(1초 후)1번 주문 완료
(3초 후)xxx
끝

• 위 코드의 결과에서 알 수 있듯이 reject를 반환하면 그 다음 프로미스를 실행하지 않으니 주의.

📌 Promise.all([]) - 동시 처리

// 선언 하는 방법은 같고 호출 시 다음과 같이 작성한다.
// res만 반환한다고 가정한다.

Promise.all([ f1, f2, f3 ]).then((res) => {
    console.log(res);
});

// 결과
undefined
undefined
(3초후)
[ ‘1번 주문이 완료되었습니다.‘, ‘2번 주문이 완료되었습니다.’, ‘3번 주문이 완료되었습니다.’ ]

• 호출시 배열을 인자로 받는다.
• undefined는 반환하는 값이 없어서 찍힌다.
• 중요한건 마지막 반환된 배열이다.
• 원래 같으면 1초, 3초, 2초 그러니까 총 6초에 동작을 마무리 한다.
• 하지만 Promise.all([])을 사용하면 동시에 프로미스를 처리하도록 하여 가장 오래걸리는 시간 3초에 모든 응답을 반환 한다.
• reject를 반환하면 아무것도 반환하지 않는다.
• 이 경우 하나의 정보라도 누락될 시 페이지를 보여주면 안되는 경우 사용 할 수 있다.
• 다 보여주거나 안 보여줄때 사용!

📌 Promise.race([])

• 호출하는 방식은 Promise.all([])과 동일한데 all 키워드를race로만 바꿔주면 되고 역시 배열을 받는다.
• 말 그대로 가장 먼저 반환되는 응답만 반환하고 작동을 멈춘다.
• 가장 빨리 로딩되는 이미지를 보여주거나 할 때 사용!