프로미스 동작 분석하기(1)

자바스크립트 공부를 하다가 프로미스에 대해서 공부한 내용을 정리해볼까 한다.

프로미스가 내부에서 어떻게 동작하는지 프로미스를 간단하게 구현하고 예제를 통해 분석해보았다.

 

아래 코드는 프로미스를 간단히 구현한 코드이다.

const _Promise = class {
constructor(callBack) {
this.status = "pending";
this.promiseResult = undefined;
this.fulfilledFun = undefined;
this.rejectedFun = undefined;
callBack(
(v) => this.resolve(v),
(v) => this.reject(v));
}
_doTask(t) {
	 if (t !== undefined) {
	      setTimeout(t, 0);
	 }
}
resolve(v) {
if (this.status !== "pending") {
	return this;
}
this.status = "fulfilled";
this.promiseResult = v;
this._doTask(this.fulfilledFun)
}
then(onFulfilled) {
switch (this.status) {
case "pending": {
return new _Promise(resolve => {
       this.fulfilledFun = () => {resolve(onFulfilled(this.promiseResult))};
})
}
case "fulfilled": { return new _Promise(resolve => resolve(onFulfilled(this.promiseResult))); }
case "rejected": { break; }
}
return this;
} 

reject(err) {}
catch (onRejected) {}
}

 

아래 블로그를 참고하였습니다.

https://velog.io/@teihong93/Promise-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1

Promise 구현하기 (1)

 

인터넷을 찾아보니 프로미스를 구현한 예제는 많이 있는데 그 중에서 가장 간단한 예제를 골라 더 간단하게 만든 것이다.

다만 then과 catch 부분은 사용하는 상태만 다를 뿐이지 내부 구현 자체는 비슷하다.

그래서 코드를 더 간단하게 하기 위하여 catch 관련 부분은 코드를 제거한 뒤 분석해 보았다.

 

간단한 예제 2가지를 사용하여 내부에서 어떻게 동작하는지 살펴보았다.

 

예제 1)

new _Promise((res, rej) => {
     setTimeout(() => { res(1)}, 3000);
})
.then((e) => {
     console.log("aa ", e);
     return e + 1
})
.then((e) => {
     console.log("bb ", e);
})

간단한 프로미스 예제이다.

딱봐도 3초 후에 aa 1이 출력되고

그 후 bb 2가 출력될 것이라고 예상할 수 있다.

 

 

예제 분석

예제1이 실행되면 우선 첫번째 프로미스 객체를 생성한다.

그로 인해서 프로미스1의 생성자가 실행되게 된다.

생성자 함수가 실행되면 해당 프로미스 객체의 상태는 pending 상태가 된다.

생성자 함수를 보면 인자로 받은 콜백이라는 이름의 함수객체를 실행시키는데

이로 인해서 res와 rej가 프로미스1의 resolve, reject와 연결되게 된다.

이후 함수객체로 전달된 setTimeout(() => { res(1)}, 3000); 명령 또한 실행되게 된다.

setTimeout 함수는 실행되면 Web API 영역으로 이동하여 3초동안 대기하게 된다.

프로미스1 객체가 생성되었고 그 다음은 프로미스 1의 메서드인 then 이 실행된다.

then 메서드에서는 프로미스 객체를 새로 생성하여 리턴하는 동작을 한다.

프로미스2 객체의 생성자가 실행되며 이때 전달된 함수 객체를 보면

화살표 함수로 이루어져 있고 this.fulfilledFun 라는 부분이 있다.

 

화살표 함수에서 this는 자신을 실행시킨 외부객체의 this를 가리키게 되므로 여기에서의 this는 프로미스1이 된다.

즉 프로미스1의 fulfilledFun 에 () => {resolve(onFulfilled(this.promiseResult))} 라는 값을 넣게 된다.

resolve에는 this가 붙지 않았으니 프로미스2의 resolve가 되고 onFulfilled 부분은 then 메서드에 전달된 함수객체가 된다.

그리고 나서 두번째 then이 실행되는데 두번째 첫번째 then 에서 프로미스2 객체가 리턴되었으니 프로미스2의 then 메서드가 된다.

이전 동작과 똑같이 프로미스 3 객체가 생성되고 프로미스2의 fulfilledFun에 값이 들어가게 된다.

 

 

이후에는 특별한 동작이 없다가 Web APIs에 들어간 setTimeout 함수가 완료되어 내부의 res 함수가 실행되게 된다.

 

 

이후 프로미스1의 resolve 메서드가 실행되게 되는데

진행되면서 프로미스 1의 상태가 fulfilled 상태로 변한다.

보면 프로미스1의 fulfilledFun 값을 setTimeout 에 감싸 실행한다.

fulfilledFun 함수를 setTimeout 으로 실행하는 이유는 프로미스는 자신이 실행하는 함수를

마이크로 태스크큐에 넣어 실행하지만 그 부분은 따라할 수가 없으니 비슷하게 태스크큐에 넣어서 실행하기 위함이다.

Web APIs 에 전달된 함수는 태스크큐로 전달된다.

 

그리하여 

() => {resolve(onFulfilled(this.promiseResult))} 이런 함수가 실행되게 되는데

우선 onFulfilled(this.promiseResult) 이 부분부터 콜스택에 들어가게 된다.

onFulfilled 라는건 아까전에 첫번째 then에 전달된 함수객체인데

구체적으로는 

(e) => {

     console.log("aa ", e);

     return e + 1

}

이거다.

여기서 e는 프로미스1 객체의 promiseResult이므로 1이 된다.

그렇게 aa 1 이라는 콘솔 텍스트를 출력하고

2를 리턴한다.

 

이후 2가 리턴되었기 때문에 

() => {resolve(2)} 

이런 함수가 콜스택에 들어가게 된다.

여기에서 resolve는 프로미스2의 resolve가 되는데 

resolve 함수를 보면 아까와 마찬가지로 자신의 fulfilledFun 을 setTimeout에 넣고 실행한다.

 

프로미스2의 fulfilledFun은 

(e) => {

     console.log(bb ", e);

}

가 되고 e는 2이기 때문에 

bb 2 라는 콘솔 텍스트를 출력하게 된다.

 

 

이후 프로미스3의 resolve 함수도 실행하지만 

프로미스3은 fulfilledFun 값이 undefined 이므로 아무것도 실행하지 않는다.

 

이렇게 

aa 1

bb 2

라는 텍스트를 출력하는것으로 프로미스 예제 1번이 완료되었다.

 

 

 

 

예제 1을 사용하여 프로미스를 분석해 보았는데

여기서는 프로미스의 then 메서드가 resolve 메서드보다 먼저 실행된 것을 알 수 있다.

프로미스 객체에 then 메서드의 인자로 들어온 함수객체를 등록시키고

resolve 메서드가 실행되면 등록시켜놓은 함수객체를 실행시키는 방식이라고 요약할 수 있을것 같다.

 

이와 다르게 예제2는 resolve 메서드가 then 메서드보다 먼저 실행되므로 

동작방식이 조금 달라진다.