Web・API - 2022. 4. 2.
직접 만들어보는 Promise 객체#12
- -
🏆직접 만들어보는 Promise 객체(Promise 동작원리)
이때까지 우리는 예시코드에서 fetch함수에서 리턴하는 promise객체를 사용했습니다.
그런데 사실 이렇게 어떤 함수가 리턴하는 promise객체를 가져다 쓰는게 아니라
직접 promise객체를 생성하는것도 가능합니다.
이번 시간에는 직접 promise객체를 만드는 방법을 배워 보겠습니다.
이 코드가 바로 promise객체를 직접 생성하는 코드 입니다.
const p = new Promise((resolve, reject) => {
});new Promise 이 부분이 promise객체를 생성 하는 코드 인데요
이렇게 new를 붙이면 자바스크립트에서는 새로운 객체를 생성할수 있습니다.
여기서 중요한것은 파라미터로 들어간 콜백 함수 입니다.
이 콜백은 promise객체를 생성될때 자동으로 실행되는 함수 입니다.
이 콜백은 좀더 전문적인 단어로 ‘executor’함수라고 부릅니다. ‘executor’함수에는
resolve와, reject라는 두개의 파라미터가 보입니다. 두 파라미터는 아주 특별한 의미를 가지고 있습니다.
👉resolve 파라미터
resolve 파라미터는 생성될 promise 객체를 fulfilled 상태로 만들수 있는 함수가 연결됩니다.
지금 setTimeout 함수를 써서 2초 후에 resolve 파라미터로 연결된 함수를 실행 하다록 했습니다.
그냥 resolve 함수라고 부르겠습니다.
resolve 함수는 promise 객체를 fulfilled 상태로 만들는 함수라고 했죠
그렇니깐 저 p라는 promise 객체가 2초후에 fulfilled 상태가 된다는 뜻 입니다.
그리고 이때 resolve 함수 안에 넣은 ‘success’라는 문자열이 작업 성공 결과가 됩니다.
정말 그런지 생성된 promise 객체뒤에 then 메소드를 붙여 보겠습니다.
이 코드를 실행 해볼게요.
자 우리가 의도한대로 2초후에 ‘success’라는 문자열이 출력되었습니다.
이걸 다시 보면 2초후에 promise 객체가 fulfilled 상태가 되었고 그에 따라서 then메소드 안에 콜백이
실행되었기 때문 입니다. 그리고 resolve함수에 아규먼트로 넣었던 ‘success’라는 문자열이
작업 성공 결과가 되어서 잘 출력이 된것 입니다.
👉reject 파라미터
reject 파라미터는 생성될 promise 객체를 rejected 상태로 만들수 있는 함수가 연결됩니다.
reject 함수는 생성되는 promise 객체를 rejected 상태로 만듭니다.
그리고 reject 함수 아규먼트로 넣은 에러객체가 작업 실패 정보가 됩니다.
이제 이 promise 객체는 rejected 상태가 될거니깐 then 메소드도 catch메소드로 바꿔줄게요
그리고 파라미터도 result에서 error로 바꾸겠습니다.
자 이코들 실행 해보겠습니다.
자 보면 2초후에 promise 객체가 rejected 상태가 되었고 ‘fail’이라는 메세지를 가진 에러 객체가 작업 실패 정보가 되었습니다.
에러 객체가 잘 출력된것을 확인 할 수 있습니다.
👉정리
자 이번 시간에는 간단한 promise 객체를 직접 만들어 봤습니다.
이렇게 promise 객체를 직접 만들다 보니 promise 객체의 작동 원리가 조금더 잘 이해가 되는것 같네요!!🔥😃👏🏻
사실 실무에선 이렇게 직접 promise 객체를 생성할 일은 많치 않습니다
이렇게 promise 객체를 직접 만드는 코드는 Promisify이라는 작업을 할때 주로 작성하게 됩니다.
Promisify이 무엇인지는 다음 노트에서 배워 봅시다.
Contents
소중한 공감 감사합니다