간단한 예시로 알아보는 JavaScript 동기 처리

thumbnail image - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

fetch를 포함한 대부분의 비동기 함수들은 실행 결과로 Promise를 반환합니다.

이번 포스트에서는 Promise를 반환하는 간단한 비동기 함수를 만들고
그 함수를 then(), catch(), finally()로 처리해보겠습니다.

아직 Promise가 익숙하지 않으신 분은 아래 링크를 참고해주세요.
간단한 예시로 알아보는 JavaScript Promise

Promise.prototype.then()

Promise가 fulfilled 상태인 경우와 rejected 상태인 경우 각각 callback 함수를 호출합니다.
비동기 작업을 완료한 경우와 실패한 경우를 하나의 메서드 안에서 처리할 때 사용하면 되겠네요.

메서드 실행 결과로는 Promise를 반환합니다.

Promise를 resolve() 처리했기 때문에 Promise는 fulfilled 상태가 되었습니다.
Promise가 fulfilled 상태이기 때문에 then()의 callback 함수 중에서 onfulfilled()가 호출되었습니다.

이번에는 Promise를 reject() 처리하였습니다.
rejected 상태가 되었기 때문에 then()에서는 onrejected()가 호출되었습니다.

Promise.prototype.catch()

Promise가 rejected 상태인 경우에만 callback 함수를 호출합니다.
비동기 작업을 실패했을 때 처리해주는 로직을 구현하면 되겠네요.

메서드 수행 결과로는 Promise를 반환합니다.

obj.catch(onRejected)는 내부적으로
obj.then(undefined, onRejected)를 호출하기 때문에
두 코드의 실행 결과는 같습니다.

Promise.prototype.finally()

Promise가 settled 상태인 경우 callback 함수를 호출합니다.
비동기 작업의 완료/실패 여부와 관계 없이 처리하는 로직을 구현하면 되겠네요.

메서드 수행 결과로는 Promise를 반환합니다.

fulfilled 상태와 rejected 상태 모두 onfinally() 함수에서 처리되었습니다.

간단한 예시

이대로 가면 속옷 위에 벨트를 착용하고 바지를 입겠네요...😨
얼른 고쳐보겠습니다.

각 비동기 함수는 Promise를 반환하고 then()에 의해서 순서대로 처리되었습니다 😊

다음 글
간단한 예시로 알아보는 JavaScript 동기 처리2

Reference
Promise.prototype.then() - MDN
Promise.prototype.catch() - MDN
Promise.prototype.finally() - MDN
Using Promises - MDN