[TIL][Asynchronous]Promise 자바스크립트 비동기
출처: PoiemaWeb
자바스크립트 Asynchronous에 대하여 공부하였다
새로운 개념인 Promise 와 Async 등의 키워드를 접하여 전반적인 비동기의 개념부터 이해하는데
애를 먹었다.. 결국 어제 밤 여러 블로그 및 MDN과 유튜브 영상을 여러개 시청하고 나서야
기초적인 개념이 이해가기 시작했다..
비동기에 대한 전반적인 개념은 아래 영상을 보며 이해할 수 있었다.
모든 코드를 동기적으로 실행할 시 시간이 많이 소모되는 코드를 만날 경우 브라우저는 해당 작업을
먼저 수행하느라 그 아래코드들로 진행하지 못하고, 사용자는 해당 동작이 완벽하게 실행되기 전 까지 최악의 경우 제대로 렌더링되지 못한 빈 화면의 웹을 쳐다보고있어야 한다.
이를 해결하기 위해 시간을 많이 소모하는 동작을 비동기 처리 하여, 해당 처리를 콜스택에서 빼 내어 다른곳에서 처리하게 되는데.. 해당 동작은 콜스택에서는 존재하지 않은 상태가 되어서 브라우저가 다른 함수등을 동시에 처리할 수 있는 등 이점이 있다.
콜스택을 빠져나와 webapis 에서 정해진 시간을 보낸 '그'동작은 task queue에서 대기하며 콜스택이 비어있게 되기를 기다리며 순차적으로 콜스택으로 돌아와 마지막 동작을 수행한다.
자바스크립트 비동기는
- Callback
- Promise
- Async
를 이용하여 사용할 수 있다.
여기에는 Promise에 대한 내용을 기록해 놓으려 한다!
Promise
Promise 는 CallStack Hell을 지양하기 위하여 만들어졌으며, 자바스크립트 비동기 처리를 위해
사용되는 Object 이다.
'객체' 이기 때문에 new 키워드를 이용하여 인스턴스를 생성하여 사용하게 된다.
new Promise((resolve,rejects) => {
// something..
})이때, Promise 는 인자로 콜백함수를 포함하는데, 그 콜백함수는 인자로 resolve와 reject 두가지를 갖게 된다.
Promise는 세가지 상태(states)를 갖고 있는데
Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
대기
Promise는 생성과 동시에 Pending(대기) 상태가 된다. 이는 해당 Promise가 아무런 결과를 내뱉지 않은 상태를 의미한다.
이행
아래와 같이 Promise의 콜백함수의 인자함수 resolve()를 실행시키면 Fulfilled(이행) 상태가 된다.
new Promise((resolve,rejects) => {
resolve();
})이행 상태가 된 Promise는 then() api를 사용하여 결과값을 받을 수 있다!
function runPromise() {
resetTitle();
playVideo();
sleep(1000).then(() => {
pauseVideo();
displayTitle();
})
.then(sleep.bind(null, 500))
.then(highlightTitle)
.then(sleep.bind(null, 2000))
.then(resetTitle)
}then()은 또한 Promise를 리턴하기 때문에, Method Chaining 처럼 Promise Chaining 이 가능하다! 이를 통해 Callback Hell 같은 상황을 피할 수 있다!
Promise를 사용하는 주된 이유가 Callback Hell 지양하는 것이기에 then() 을 사용하는데 있어서 또다른 Promise Hell 을 발생시키지 않는게 중요하다.
실패
아래와 같이 Promise의 콜백함수의 인자함수 reject()를 실행시키면 Rejected(이행) 상태가 된다.
new Promise((resolve,rejects) => {
reject();
})Promise 가 실패 상태에 도달했을 때는 catch() api를 사용하여 실패 결과값(사유) 를 받을 수 있다.
function runPromise() {
resetTitle();
playVideo();
sleep(1000)
.then((param) => {
console.log(param);
pauseVideo();
displayTitle();
return ‘world’;
})
.then((param) => {
console.log(param);
sleep(500);
})
.then(highlightTitle)
.then(sleep.bind(null, 2000))
.then(resetTitle)
.catch((err) => {
console.log(err);
});
}catch()는 사용 위치가 중요한데, 일반적으로 가장 마지막에 작성하게 되며, 중간에 삽입할 경우 바로 직전의 실패상황에 대한 실패처리가 가능하며 이 때에는 중간에 실패가 발생하더라도 체인의 끝까지 진행되게 된다.
아직은 완벽하게 흡수하지 못한 부분이 많지만, 포스트를 작성하며 다시 머릿속에 저장해 놓을수 있기를...
다음 포스트에는 Async에 대하여!
Author And Source
이 문제에 관하여([TIL][Asynchronous]Promise 자바스크립트 비동기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tsts_/TILAsynchronousPromise-자바스크립트-비동기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
