자바스크립트의 Promise()로 callback지옥 벗어나기

동기적 실행 

 : 코드가 순서에 맞춰서 자동적으로 실행됨

hoisting

 : var변수, function declaration( 함수선언)들이자동적으로 제일 위에 선언됨 

 

callback 함수

 : 내가 전달해 준 함수를 나중에 실행해줘

 

* setTimeout( hadler , timeout) 

  - handler : callback 함수

  - timeout: 지정된 시간  ms 단위 (1초 1000)

 

비동기 실행 (실습)

 

js엔진은 코드를 제일 위에서부터 아래로 실행 

console.log('1');
setTimeout(function(){
    console.log(2);
},1000)

console.log('3');

//화살표 함수로 표현 가능
console.log('1');
setTimeout(()=> console.log('2'),1000);

console.log('3');

1 -> setTimeout( 브라우저 API) -> 3

브라우저에게 요청 -> "브라우저야 이거 해줘" -> 1초 지남 -> console.log(2)전달

 

 

 

동기 함수 

console.log('1');
setTimeout(() =>console.log(2),1000);

console.log('3');

function printImm(print) {
    print();
}

printImm( ()=> console.log('heelo'));

1 > 3 >  heelo >  2

 

 

비동기 함수

console.log('1');
setTimeout(() =>console.log(2),1000);

console.log('3');

function printImm(print) {
    print();
}

printImm( ()=> console.log('heelo'));


function printWaa(print,timeout){
    setTimeout(print,timeout);
}
printWaa( ()=> console.log('async callback'),2000);

1   > 3 >  heelo > 2  > async acllback

 

 

---

콜백지옥 만들고 해결해보기 

// 1) 사용자 확인 2)권한 부여  

// 당장 서버와 연결은 안되니 비슷 하게 setTimeout을 이용하여 비동기 처리 
class UserStorage {

	// 1) id와 pw 를 비교해서 사용자가 맞는지 확인 
    loginUser( id,password,onSuccess,onError){
        setTimeout(()=>{
            if(
                (id==='tami' && password==='cool')||
                (id==='coder' && password==='academy')
            ){
                onSuccess(id);
            }else{
                onError(new Error('not found'));
            }
        },2000);
    }
	
    // 2) 사용자가 관리자인지 확인 후 권한 부여
    getRoles(user,onSuccess,onError){
        setTimeout(()=>{
            if(user==='tami'){
                onSuccess({name:'tami',role:'admin'});
            }else{
                onError(new Error('no access'));
            }
        },1000);

    }
}

// 실행 
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

userStorage.loginUser(
    id,
    password,
    user=>{
        userStorage.getRoles(
            user,
            userWithRole =>{
                alert(`hello ${userWithRole.name},you have ${userWithRole.role}`);
            },
            error=>{console.log(error);}
        );
    },

    error=>{console.log(error);
    }

);

문제점

1) 가독성이 떨어짐

2) 비즈니스 로직 이해가 어려움 

 

 

---

Promise 프로미스

출처https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

JS에더 제공하는 비동기를 간편하게 처리할 수 있게 하는 object

callback을 쓰지 않고 

 

state

pending -> fullfilled or rejected

 - pending : promise가 만들어져서 우리가 지정한 operation이 진행중일 떄

- fullfilled : operation 성공적으로 실행 

- rejected file 찾을수 없거나 network 문제가 생겼을 떄

 

producer (정보 제공자) 와 consumer(정보 소비자) 의 차이

 

 

파일을 읽어오고 네트워크 통신이 진행되는 동안 아무일도 하지 않을 수 없기 때문에 다른일도 처리할 수 있도록 비동기적으로 처리

 

promise는 execute

const promise = new Promise((res,rej)=>{
    console.log('doging somctins');
});

promise가 만들어 지는 순간 network 통신이 시작됨 executor(콜백함수== (res,rej))!! 

사용자가 요구하지 않는 네트워크 통신이 일어나지 않게 조심 

 

 

ㄹ

// Producer
//성공했을 떄 resolve
//실패 시 reject
const promise = new Promise((resolve,reject)=>{
    console.log('doging somctins');
    setTimeout(()=>{
        // resolve('tami');
        reject(new Error('no network'));
    },2000)
});

//Cousumer  value==tami


//then 성공시
// catch 에러시
// finally 성공여부와 관계 없이 
promise
    .then((value)=>{
    console.log(value);
    })
    .catch(error=>{
        console.log(error);
    })
      .finally(()=>{
        console.log('finally');
    })

 

promise 체이닝

 

.then : 값 전달, promise 전달 둘다 가능 

비동기 동작들을 묶어서 진행하기도 가능 

const fetchNumber = new Promise((resolve,reject)=>{
    setTimeout(()=> resolve(1),1000);
});


fetchNumber
.then(num=> num*2)
.then(num => num*3)
.then(num =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(num-1),1000);

    });
})
.then(num =>console.log(num));

---

 

Promise() 를 활용하여 콜백지옥 빠져나가기

class UserStorage {
    loginUser( id,password){
        return new Promise((resolve, reject)=>{
            
            setTimeout(()=>{
                if(
                    (id==='tami' && password==='cool')||
                    (id==='coder' && password==='academy')
                ){
                    resolve(id);
                }else{
                    reject(new Error('not fonud'));
                }
            },1000);

        })
    }

    getRoles(user){
        return new Promise((resolve,reject)=>{

            setTimeout(()=>{
                if(user==='tami'){
                    resolve({name:'tami',role:'admin'});
                }else{
                    reject(new Error('no access'));
                }
            },1000);
        })

    }
}

콜백지옥이었던 코드가

//  콜백 지옥
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

userStorage.loginUser(
    id,
    password,
    user=>{
        userStorage.getRoles(
            user,
            userWithRole =>{
                alert(`hello ${userWithRole.name},you have ${userWithRole.role}`);
            },
            error=>{console.log(error);}
        );
    },

    error=>{console.log(error);
    }

);

Promise를 사용함으로써 한눈에 확인할 수 있음 

// Promise 사용 
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');


userStorage.loginUser(id,password)
.then(user => userStorage.getRoles(user))
.then(user=>alert(`hello ${user.name},you have ${user.role}`))
.catch(console.log);

 

 

 

참고한 영상

www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11