중복되어도, 복습의 개념 및 설명할 수 있는 정도로의 개념으로 재학습해서 정리한다
⌚️ Promise와 callback
-
비동기 작업은 콜스텍이 아닌 브라우저 기준 web API에 의해 캐치되어 콜백 큐에 준비되는 대로(즉 함수객체 평가 => 실행 컨텍스트 형성 및 렉시컬 환경 생성) 세팅된 뒤에 콜스텍이 비게 되면 실행되게 된다.
-
이런 특성으로 인해 비동기 작업이 반드시 순차적으로 진행될 것이라는 보장이 없으므로, 하나의 비동기 작업 함수가 끝나면 그다음 비동기 함수의 작업이 실행되도록 매개변수에 함수 객체값을 전달하여 실행되게 만들어야 한다.
-
하지만, 이렇게 되면 깊이가 깊어지게 되어 유지보수가 어렵게 되므로 Promise 방식을 사용하는 것이 일반적이다.
-
Promise는 비동기적인 작업을 Listening할 수 있는 특수한 객체이다
-
new Promise를 통해 생성하면 내부에 프로미스 상태 슬롯과, 프로미스 결과, then,catch,finally를 보유하고 있고 constructor 프로퍼티에는 각종 정적 메서드(resolve, reject, race, all 과 같은) 이 존재한다.
-
비동기 작업이 끝마쳐지면, [[PromiseState]] 와 [[PromiseResult]] 업데이트되고, 이 값을 전체 내부 메서드들이 리스닝하고 있다.
-
여기서 객체 내부 소비자 메서드 then, catch, finally를 호출하여 내부에서 순차적인 비동기 작업이 가능하다. 해당 메서드들은 다시금 Promise 객체를 리턴하기 때문에 체이닝이 가능해진다.
-
then은 "fullfilled". catch는 "rejected" 상태를 구독하고 있다.
-
세 소비자 메서드들은 마이크로 테스크 큐라고 하는 특수한 큐에 들어가게 되며, Promise 객체가 생성되어 인자로 전달된 resolver 함수(resolve,reject를 전달받는) 가 실행이 완료가 될 때에 PromiseState에 따라서 탐색되어 실행된다. (ex, reject 상태라면 마이크로테스트큐의 앞에서부터 훑어보며 catch를 찾아냄)
⌚️ async await
- async가 붙게 되면 암묵적으로 해당 함수가 리턴하는 값은 프로미스 객체화 하여 담겨서 나오게 된다.
- 함수 내에 await 키워드가 붙은 함수가 호출이 된다면 실행 컨텍스트의 내부 실행이 잠시 멈추고 해당 비동기 작업이 끝마쳐지기를 기다리게 된다.
- 이 JS엔진이 스크립트를 실행하는 것을 "기다린다" 는 특성 덕택에, try...catch에서 사용하면 유용하다. (일반적으로 Try~ catch는 비동기 작업에 대한 에러를 잡아내지 못하지만 await을 사용하면 해당 작업을 마치 동기적인 것처럼 작업하다가 실패 결과가 업데이트 되면 catch 블록에 전달되기 때문이다)
