이전 글에 구현했던 fakeRequestPromise
에 이어 Promise가 콜백 지옥을 일으키는 nesting을 어떻게 해결할 수 있는지에 대해 본격적으로 알아봅시다.
이전 글을 보지 않으셨다면, 이해가 어려울 수 있으니 fakeRequestPromise 글을 참고해주시면 됩니다.
const fakeRequestPromise = (url) => {
return new Promise((resolve, reject) => {
const delay = Math.floor(Math.random() * (4500)) + 500;
setTimeout(() => {
if (delay > 4000) {
reject('Connection Timeout :(')
} else {
resolve(`Here is your fake data from ${url}`)
}
}, delay)
})
}
fakeRequestPromise('yelp.com/api.coffee/page1')
.then(() => {
console.log('IT WORKED!! (page1)')
fakeRequestPromise('yelp.com/api.coffee/page2')
.then(() => {
console.log('IT WORKED!! (page2)')
})
.catch(() => {
console.log('OH NO, ERROR!!! (page2)')
})
})
.catch(() => {
console.log('OH NO, ERROR!!! (page1)')
})
Promise
를 사용했지만 위와 같이 nesting을 피할 수는 없었습니다. 결국 한눈에 봐도 복잡한 상황임을 알 수 있습니다.
fakeRequestPromise('yelp.com/api.coffee/page1')
.then(() => {
console.log('IT WORKED!! (page1)')
return fakeRequestPromise('yelp.com/api.coffee/page2')
})
.then(() => {
console.log('IT WORKED!! (page2)')
return fakeRequestPromise('yelp.com/api.coffee/page3')
})
.then(() => {
console.log('IT WORKED!! (page3)')
})
.catch(() => {
console.log('OH NO, A REQUEST FAILED!!!')
})
어떤가요? 이제는 눈으로 봐도 훨씬 간단하고 로직이 복잡하지 않다는 것을 알 수 있죠? 이렇게 Promise
는 then
이라는 속성의 콜백 함수에 return
값으로 다음에 호출할 함수를 명시해주면 됩니다. 그리고 catch
에는 마지막에 연산을 실패했을 경우만 실행할 콜백 함수를 넣어주면 되는 것입니다.
위의 함수 호출에서 보시다시피 parameter, 매개 변수가 포함되어 있지 않을 것을 확인할 수 있습니다.
setTimeout(() => {
if (delay > 4000) {
reject('Connection Timeout :(')
} else {
resolve(`Here is your fake data from ${url}`)
}
그래서 윗 부분의 코드 내용이 함께 호출이 되지 않았던 것이죠. 정작, 우리가 요청한 중요한 url 데이터를 반환해주지 않았습니다. 그럼 매개 변수를 어느 곳에 정의를 해주어야 하는 것일까요?
fakeRequestPromise('yelp.com/api.coffee/page1')
.then((data) => {
console.log('IT WORKED!! (page1)')
console.log(data)
return fakeRequestPromise('yelp.com/api.coffee/page2')
})
.then((data) => {
console.log('IT WORKED!! (page2)')
console.log(data)
return fakeRequestPromise('yelp.com/api.coffee/page3')
})
.then((data) => {
console.log('IT WORKED!! (page3)')
console.log(data)
})
.catch((err) => {
console.log('OH NO, A REQUEST FAILED!!!')
console.log(err)
})
예상하셨겠지만, then
, catch
의 콜백 함수에 매개 변수로 값을 넣어주면 됩니다. 이를 통해, 우리가 원했던 data를 얻어낼 수가 있죠.
실제로 Promise
를 처음 접하면 어려운 개념이지만, 익숙해진다면 제목처럼 마법같이 간결한 코드를 작성할 수 있기 때문에 반복적으로 사용하려 노력하면 분명 자연스럽게 사용할 수 있을 것이라 생각합니다 :D