Ajax & Promise & Async, Await

ENTERPR!ZE·2022년 6월 2일

우리는 (또는 나만) JS 구동원리를 보면서 Web API에 ajax가 있으며
콜스택이 전부 비워진 다음에야 Callback queue를 통해서 ajax callback이 실행된다는것을 알고 있을것이다.

사실상 ajax는 크게 신경쓰지 않겠다.
이유인 즉슨 ajax는 Web API 에 속해있고
Promise와 Async Await는 ES6, ES7에 속해있어서 구분이 다르며

또한 ajax는 비동기 방식으로 콜백데이터를 가져오는것에 비해
Promise와 Async는 동기방식으로 콜백을 처리한다.

콜 스택에 있는 함수가 먼저 처리되고, 콜백 큐가 뒤이어 들어오는 JS 구동방식에 따라서
현재 진행하고 있는 프로젝트에서 ajax를 사용한다면 콜백으로 들어오는 데이터를 받아올 함수보다 데이터가 먼저 들어오는 상황이 발생한다.

이런 상황을 피하기 위해서 Promise나 Async를 사용한다.
하지만 Async가 ES7에서 도입된 이후 Promise를 굳이 사용하진 않고있다. (나 개인적으로는)

그래서 Promise 부터 이야기 해보겠다!


Promise

Pending

: 대기상태로 처리가 완료되지 않은 상태

Fulfilled

: 성공적으로 처리가 완료된 상태

Rejected

: 처리가 실패로 끝난 상태

settled

: 어찌됐든 저찌됐든 일단 결론은 나온상태


const X = new Promise((resolve, reject) => {
	~~~
})

이렇게 신규 프로미스를 선언할 시에 프로미스는 executor라는 파라미터를 필요로 하는데
이때 executor로 들어가는것이 resolve와 reject이다.

신규 Promise 생성시 executor는 자동적으로 실행된다.
이렇게 데이터 값을 받아오는 것을 PRODUCER


(reslove = value)
promise.then(value) => {
	console.log("hello world");
}

이렇게 값을 받아와서 사용하는 것을 CONSUMER

profile
생각이 난다면 포스트!

0개의 댓글