[js] 콜백지옥 코드 수정

콜백지옥이란?

1. 콜백지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다.

2. 콜백함수를 이용해서 비동기 로직처리 시, 코드가 깊어지는 것을 말한다.

3. 일반적으로 콜백지옥을 해결하는 방법에는 Promise 나 async & await를 사용하는 방법이 있다.

 

콜백지옥 -> Promise -> async & await 순서로 수정한다.

 

콜백지옥 예시 코드)

class UserStorage{
    loginUser(id, password, onSuccess, onError){
      setTimeout(() =>{
        if(
            id === 'kfdd6630' && password === '123'
         ) {
            onSuccess(id);
         } else{
            onError(new Error('error'));
         }
        }, 2000);
    }
    
    getRoles(user, onSuccess, onError){
        setTimeout(()=> {
            if (user === 'kfdd6630') {
                onSuccess({name: 'kfdd6630', role: 'admin'});
            } else {
                onError(new Error('error'));
            }
        }, 1000);
    }
};

const userStorage = new UserStorage();
const id = prompt('아이디를 입력해 주세요!');
const password = prompt('비밀번호를 입력해 주세요!!');

userStorage.loginUser(
    id,
    password,
    user => {
        userStorage.getRoles(
            user,
            userWithRole => {
                alert(`hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
            },
            error => {
                console.log('에러 02 발생')
            }
            );
        },
    error => {console.log('에러 01 발생')}
);

사용자의 id 와 pw를 입력받아 유저정보(role)을 받아와서 출력하는 코드이다.

 

콜백함수란?

2023.03.21 - [언어/Javascript,TypeScript] - [js] 콜백함수(callback)

[js] 콜백함수(callback)

 

1. Promise 적용하기

class UserStorage{
    loginUser(id, password){
        return new Promise((resolve, reject) => {
           setTimeout(() =>{
               if(
                   id === 'kfdd6630' && password === '123'
                 ) {
                    resolve(id);
                 } else{
                    reject(new Error('에러 01 발생'));
                 }
           }, 2000);
       })
    }
    
    getRoles(user){
       return new Promise((resolve, reject) => {
          setTimeout(()=> {
              if (user === 'kfdd6630') {
                resolve({name: 'kfdd6630', role: 'admin'});
              } else {
                reject(new Error('에러 02 발생'));
              }
           }, 1000);
       })
    }
};

const userStorage = new UserStorage();
const id = prompt('아이디를 입력해 주세요!');
const password = prompt('비밀번호를 입력해 주세요!!');

userStorage.loginUser(id, password) 
.then(userStorage.getRoles) 
// .then(user => userStorage.getRoles(user)); 인자가 하나이고 똑같으니 생략 가능하다.
.then(user => alert(`hello ${user.name}, you have a ${user.role} role`)) 
.catch(console.log);

 

Promise란?

2023.03.22 - [언어/Javascript,TypeScript] - [js] Promise 정리

[js] Promise 정리

 

2. async & await 적용하기

class UserStorage{
    loginUser(id, password){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(
                    id === 'kfdd6630' && password === '123'
                 ) {
                    resolve(id);
                 } else{
                    reject(new Error('에러 01 발생'));
                 }
            }, 2000);
        })
    }
    getRoles(user){
        return new Promise((resolve, reject) => {
            setTimeout(()=> {
                if (user === 'kfdd6630') {
                    resolve({name: 'kfdd6630', role: 'admin'});
                } else {
                    reject(new Error('에러 02 발생'));
                }
            }, 1000);
        })
    }
};

const userStorage = new UserStorage();
const id = prompt("아이디를 입력해 주세요!");
const password = prompt("비밀번호를 입력해 주세요!!");

async function checkUser() {
  try {
    const userId = await userStorage.loginUser(id, password);
    const user = await userStorage.getRoles(userId);
    alert(`Hello ${user.name}, you have a ${user.role}`);
  } catch (error) {
    console.log(error);
  }
}
checkUser();

 

async & await란?

2023.03.22 - [언어/Javascript,TypeScript] - [js] async & await 정리

[js] async & await 정리

 

setTimeout은 Promise반환을 하지 않기 때문에 async와 await를 적용해도 동기적으로 적용되지 않는다.

따라서 Promise를 반환하게 직접 작성 후 async와 await를 적용해야 하고 try...catch구문으로 예외처리를 해준다.

2023.03.23 - [언어/Javascript,TypeScript] - [js] try...catch, finally 정리

[js] try...catch, finally 정리