utterances-bot commented 4 years ago

[javascript]Promise를 보다 잘 활용 할 수 있는 Tip - armadillo’s blog

Promise는 javascript에서 비동기 처리를 위해 사용된다. 개인적으로 es7에 들어서며 async/await로 그 사용처가 줄어들었다(Promise로 작성된 코드는 async/await로 작성된 코드에 비해 가독성이 떨어진다). 그럼에도 불구하고 여전히 특정 케이스에서는 Promise를 적극 활용하고 있어 공유하고자 한다.

https://armadillo-dev.github.io/javascript/javascript-tips-of-promise/

devSoyoung commented 4 years ago

좋은 글 감사합니다! Promise.race 활용 사례를 이해하는 데 많은 도움이 되었어요 :)

parkoon commented 4 years ago

먼저, 좋은 글 잘 읽었습니다. 질문 하나 드려도 될까요?

retry(func, params, maxRetriesCount - 1).then(resolve, reject)

위 코드가 어떻게 동작 하는지 알 수 있을까요? setTimeout 에서 retry를 호출 할 때

retry(func, params, maxRetriesCount - 1) 위와 같이 호출하면 정상 동작을 하지 않더라구요.

armadillo-dev commented 4 years ago

@parkoon님, 안녕하세요. 답변이 늦어졌네요😭

Promise는 3가지(pending, fulfilled, rejected) 상태를 가지고 있습니다. 그리고 아래 코드와 같이 상태 값을 변경할 수 있습니다.

// promise는 생성과 동시에 pending 상태
new Promise((resolve, reject) => {
  resolve() // promise를 fulfilled 상태로 전환
  reject() // promise를 rejected 상태로 전환
})
.then(...)
.catch(...)

위의 코드에서 then(...)은 Promise의 상태가 fulfilled가 되었을 때 실행되고, catch(...)는 rejected 상태가 되었을 때 실행됩니다.

말씀하신 코드에서 .then을 사용하지 않으면 fetchUsers 함수 실행이 완료되어도 가장 처음 실행된 retry 함수(const users = await retry(fetchUsers);)가 resolve 되지 않습니다.

때문에 await retry(fetchUsers);에서 반환되는 Promise는 계속 pending 상태로 머물게 됩니다. await은 promise의 상태가 fulfilled가 될 때까지 기다리기 때문에 이후 진행이 되지 않게 됩니다.

저는 Promise를 중심으로 말씀 드렸는데, 저 예제에는 Promise, 재귀함수, 클로저 개념이 같이 사용되어 있습니다. 말씀드린 키워드로 검색해보시면 더 많은 정보를 얻으실 수 있을거에요!

감사합니다.

armadillo-dev / armadillo-dev.github.io

javascript/javascript-tips-of-promise/ #3

[javascript]Promise를 보다 잘 활용 할 수 있는 Tip - armadillo’s blog