Promise
코어 자바스크립트(정재남 저) 책을 기본으로 하여 자바스크립트를 공부하면서 내용을 정리하고자 한다.
04 Callback function
🖇 Promise
Promise 는 자바스크립트에서 비동기 작업을 간편하게 할 수 있게 도와주는 객체이다.
비동기 작업을 수행하다가 작업이 성공적으로 이루어지면 성공의 결과값을 반환하지만, 예상치 못한 상황이 발생하여 작업이 실패하면 error를 반환한다.
🪄 Promise의 주요 POINT!
1.State
Promise 는 3가지 상태를 가진다.
🪡 Pending : 비동기 처리가 아직 진행되지 않은 상태 [resolve 또는 reject 함수가 실행되지 않음]
🪡 Fulfulled : 비동기 처리가 수행된 상태 (성공) [resolve 함수 실행]
🪡 Rejected : 비동기 처리가 수행된 상태 (실패) [reject 함수 실행]
2. Producer vs Consumer
🪃 Producer
💡 NOTICE
Promise 는 생성한 즉시 실행된다. 자동적으로~
🪃 Consumers
then, catch, finally : 결과값을 받아온다.
📎 then
then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다.
첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고
두 번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다.
📎 catch
예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다.
📎 finally
Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행된다.
이것은 Promise가 성공적으로 실행되었는지 거절되었는지에 관계없이 Promise가 처리 된 후에 코드가 무조건 한 번은 실행되게 한다.
👉🏼 For Example
위의 예시를 보면, 좀 더 이해가 될 듯 하다.
변수 complete를 가지고 성공, 실패를 확인할 수 있는데, 지금 변수의 값이 false 임으로 reject 함수가 실행될 것이다.
결과는 value -> something wrong!
변수 complete가 true 라면 resolve 함수가 실행되고,
결과는 value -> result! 가 나올 것이다.
그리고 변수 complete가 무엇이든 간에
결과값으로 finally 는 무조건 출력된다.
⛓ Promise Chaining
Promise 는 여러 개의 Promise 를 연결하여 사용할 수 있다.
👉🏼 For Example 1
결과값을 받아 바로 다음 .then 으로 넘겨주는 형식으로 진행된다.
👉🏼 For Example 2
자, 그럼 콜백함수에서 콜백지옥이 발생하던 코드를 Promise로 변경해보자.
좀 더 간단하게 코드를 바꾸면,
💁🏻♀️ Error handling
Promise 에서는 2가지 방법으로 에러처리가 가능하다.
첫번째는 then 메소드의 두번째 콜백함수를 사용하는 방법이고, 두번째 방식은 catch 메소드를 사용하는 방법이다.
그러나, 첫번째 방법의 에러처리는 가독성이 좋지 않을 뿐더러, then 메소드의 첫번째 콜백 함수에서 에러가 나면 잡아내질 못한다.
때문에 Promise 에러처리는 두번째 방식인 catch 메소드를 사용하는 것이 권장된다.
👉🏼 For Example
👩🏻💻 then 메소드의 두번째 콜백 함수 사용하는 에러처리
🧑🏻💻 catch 메소드를 통한 에러처리
2가지 경우 다 결과는 동일하다.
그럼, 다음의 경우를 살펴보자.
👩🏻💻 then 메소드의 두번째 콜백 함수 사용하는 에러처리 2
then 메소드의 첫번째 콜백함수 내부에서 일어나는 에러를 잡아내지 못한다.
🧑🏻💻 catch 메소드를 통한 에러처리 2
catch 메소드를 사용하는 경우 에러처리가 가능하다.
👉🏻 다음 장에서 이어서 설명 👉🏻 Next Page
