동기와비동기_2 (Promise)

https://hani-develop-history.tistory.com/42

동기와 비동기_1

 

위에 글에 이어서 비동기 공부한 내용을 정리하고자 한다.

 

JS에서 비동기 작업을 도와주는 객체 중 하나인 Promise에 대해 공부해봤다.

 

Promise

- 비동기 처리를 도와주는 객체

 

장점

1. 비동기 처리 시점을 명확하게 표현할 수 있음
2. 연속된 비동기 처리 작업을 추가, 삭제, 수정하기 좋음

 

비동기 작업 상태 종류

• Pending: 대기
• Fulfilled: 이행
  • resolve 함수가 호출된 경우 성공
  • reject 함수가 호철된 경우 실패
• Rejected: 실패

 

예제 코드

function isPositive(number) {
    const executor = (resolve, reject) => {
        setTimeout(()=>{
            if (typeof number === "number") {
                resolve(number > 0 ? "양수" : "음수");
            } else {
                reject("숫자가 아닙니다.");
            }
        }, 2000);
    };

    // 객체 생성, 선언된 순간 바로 실행됨!
    const asyncTask = new Promise(executor);
    return asyncTask; 
}

// 성공
const res = isPositive(101);
res.then((res)=>{
    console.log("성공", res); // Fulfilled: 이행
}.catch((err)=>{
    console.log("실패", err); // Rejected: 실패
}));

 

위에 예제는 이제 Promise의 기본 구조를 알기 위해 작성한 코드입니다.

그래서 위 코드만 봤을 때는 "어? 어떻게 저 코드로 콜백 지옥을 벗어날 수 있지?" 라는 생각을 할 수 있을 거 같습니다.

왜냐하면 제가 그랬거든용 ㅎㅎㅎ 

 

그래서 다른 예제를 통해 얼마나 콜백 지옥을 벗어날 수 있게 해주는지 확인해보겠습니다!!!

 

예제2 

function taskA(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            const res = a + b;
        }, 2000);
    })
}

function taskB(b) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            const res = b * 2;
        }, 1000);
    })
}

function taskC(c) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            const res = c * -1;
        }, 3000);
    })
}

// 콜백 해결 이후
taskA.then(5, 1).then((a_res)=>{
    console.log("a의 결과: ", a_res);
    return taskB(a_res);
}).then((b_res)=>{ // taskA의 return 값 (promise 객체)
    console.log("b의 결과: ", b_res);
    return taskC(b_res);
}).then((c_res)=>{
    console.log("c의 결과: ", c_res);
});

// 콜백 해결 이전
taskA(3, 4, (a_res)=>{
    console.log("a의 결과: ", a_res);
    taskB(a_res, (b_res)=>{
        console.log("b의 결과: ", b_res);
        taskC(b_res, (c_res)=>{
            console.log("c의 결과: ", c_res);
        })
    }) 
})

확실히 위에 코드를 보면 이전과 이후에 얼마나 차이가 나는지 보입니다.

지금은 사용하는 함수가 3개 밖에 없지만 프로젝트가 커질 수록 Promise의 장점을 알 수 있을 거 같습니다.