Promise

이전 글에 구현했던 fakeRequestPromise에 이어 Promise가 콜백 지옥을 일으키는 nesting을 어떻게 해결할 수 있는지에 대해 본격적으로 알아봅시다.

이전 글을 보지 않으셨다면, 이해가 어려울 수 있으니 fakeRequestPromise 글을 참고해주시면 됩니다.

1. Callback Hell 벗어나기?!

1.1 nesting...

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을 피할 수는 없었습니다. 결국 한눈에 봐도 복잡한 상황임을 알 수 있습니다.

1.2 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에는 마지막에 연산을 실패했을 경우만 실행할 콜백 함수를 넣어주면 되는 것입니다.

1.3 parameter

위의 함수 호출에서 보시다시피 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