javscript - 콜백 지옥

class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if (
                (id === "dongha" && password === 1234) ||
                (id = "dongeun" && password === 1234)
            ) {
                onSuccess(id)
            } else {
                onError(new Error("not found"))
            }
        }, 2000)

    }
    getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if (user === "dongha") {
                onSuccess({
                    name: "dongha",
                    role: "admin"
                })
            } else {
                onError(new Error("no access"))
            }
        }, 1000)
    }
}

콜백으로 물린 코드를 promise로 바꾼다.

loginUser(id, password) {
     return new Promise((resolve, reject)=>{
           setTimeout(() => {
            if (
                (id === "dongha" && password === 1234) ||
                (id = "dongeun" && password === 1234)
            ) {
                resolve(id)
            } else {
                reject(new Error("not found"))
            }
        }, 2000)
     })

loginUser의 파라메터로 id, password만 주고 return 값으로 promise를 준다.

getRoles(user) {
    setTimeout(() => {
        return new Promise((resolve, reject) => {
            if (user === "dongha") {
                resolve({
                    name: "dongha",
                    role: "admin"
                })
            } else {
                reject(new Error("no access"))
            }
        }, 1000)
    })
}

getRoles도 바꿔준다.

const userStorage = new UserStorage()
const id = prompt("id")
const password = prompt("password")

userStorage
.loginUser(id,password)
.then(user => userStorage.getRoles(user))
.then(user => alert(`hi ${username}, you are ${{user.role}}`))
.catch(console.log)

// 아래는 콜백지옥
userStorage.loginUser(
    id,
    password,
    (user) => {
        userStorage.getRoles(
            user,
            (userWithRole) => {},
            (error) => {}
        )
    },
    (error) => {
        console.log(error)
    }
)
//

then으로 콜백지옥 해결!