JS 콜백(callback) 지옥

콜백

 

const fakeRequestCallback = (url, success, failure) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
        if (delay > 4000) {
            failure('Connection Timeout :(')
        } else {
            success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

// delay가 4000 이상이면 failure해서 Connection Timeout, 
// 아니면 success해서 url을 불러온다.

success가 첫번째 콜백, failure가 두번째 콜백

const fakeRequestCallback = (url, success, failure) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
        if (delay > 4000) {
            failure('Connection Timeout :(')
        } else {
            success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

fakeRequestCallback('books.com', function (response) {
    console.log("IT WORKED!!")
    console.log(response)
}, function (error) {
    console.log("ERROR!", error)
})

난수값으로 인해서 delay가 4000 이상이면 fuakeRequestCallback 함수의 첫번째 콜백인 

console.log("IT WORKED!!") 와 response 값을 console.log 한다. 여기서 response 값은success(`Here is your fake data from ${url}`) 의 `Here is your fake data from ${url}` 이다. 여기서 단순히 books.com이 아닌 다른 페이지가 보고 싶다면 bookes.com/page1.... 를 콜백해야한다.

fakeRequestCallback('books.com', function (response) {
    console.log("IT WORKED!!")
    console.log(response)
    fakeRequestCallback('books.com/page2', function (response) {
        console.log("IT WORKED 2!!!")
        console.log(response)
    },
        function (error) {
            console.log("ERROR 2 !!!")
        })
}, function (error) {
    console.log("ERROR!", error)
})

굉장히 보기 어렵다. 이것을 해결하기 위해 있는 것이 Promise다 .