콜백 지옥에서 탈출

비동기 작업에서 가질 수 있는 3가지 형태

pending(대기상태) -> resolve됬다 fullfilled(성공), reject됬다 rejected(실패)상태

콜백함수를 활용한 예

function isPositive(number,resolve,reject) {
    setTimeout(()=>{
        if (typeof number === 'number') {
            //resolve
            resolve(number>=0?'양수':'음수');
        }else{
            // reject
            reject('주어진 값이 숫자형이 아닙니다');
        }
    },2000);
}

isPositive([10],
           (res)=>{
  				console.log('성공적으로 수행됨',res);},
           (err)=>{console.log('실패 하였음',err);});

promise 객체를 활용한 예

function isPositiveP(number) {
    const excutor = (resolve,reject)=>{
        setTimeout(()=>{
            if (typeof number === 'number') {
                console.log(number);
                //resolve
              return  resolve(number>=0?'양수':'음수');
            }else{
                // reject
               return reject('주어진 값이 숫자형이 아닙니다');
            }
        },2000);

    }
    
    const asyncTask = new Promise(excutor);// promise 객체를 사용한 비동기 처리 조건부 함수에서 콜백함수를 찾는다.
    return asyncTask; 
}
const res = isPositiveP(1);
res.then((res)=>{console.log('작업성공',res);}).catch((err)=>{console.log('작업실패',err);});// 1.작업 성공 2.작업 실패
//1. return이 resolve일 경우 2.return이  reject일 경우
res.catch((err)=>{
    console.log('숫자형아님');
});

어떻게 하면 콜백 지옥에서 탈출 할까?

taskA(4,5,(a_res)=>{
    console.log('A result:',a_res);
    taskB(a_res,10,(b_res)=>{
        console.log('B result',b_res);
        taskC(b_res,(c_res)=>{
            console.log('C result',c_res);
        });
    });
});

이렇게 ㅎㅎ

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

function taskB(a,b){
    const excutor = (resolve,reject)=>{

        setTimeout(()=>{
            const res  =  a * b;
            resolve(res);
        },1000);
    }
    
    return new Promise(excutor);
        // console.log('A 작업 끝');
}

function taskC(a,){
    return new Promise((resolve, reject)=>{

        setTimeout(()=>{
            const res  =  a *  -1;
            resolve(res);
        },2000);
    })
   
        
}


taskA(3,1).then((a_res)=>{
    console.log('A result는 ',a_res);// then chaing
    return taskB(a_res,3);
}).then((b_res)=>{
    console.log('B result는',b_res);
    return taskC(b_res);
}).then((c_res)=>{
    console.log('C result는',c_res);
});

// 사이에 콘솔을 넣고 싶을 때는 어떻게 할까?
taskA(3,1).then((a_res)=>{
    console.log('A result는 ',a_res);// then chaing
    return taskB(a_res,3);
});// 함수 선언
taskA(3,1).then((b_res)=>{
    console.log('B result는',b_res);
    return taskC(b_res);
}).then((c_res)=>{
    console.log('C result는',c_res);
});