✅ 학습 키워드
1. Promise, resolve, reject
2. state: pending, fulfilled, rejected
2. producer, consumer
3. then, catch, finally
4. Asynchronous, Await
5. Promise API - Promise.all, Promise.racePromise란?
Promise는 객체다. 객체란 키-값 쌍으로 이루어진 데이터 저장 공간을 의미한다.
그러나 Promise는 특별한 목적을 위해 설계된 객체다. 그 특별한 목적은 '비동기 작업'이다.
Promise는 비동기 작업이 끝나면 등록한 콜백 함수를 실행시켜 줄 것을 '약속'한다.
그리고 그 콜백 함수를 통해 생성된 데이터는 Promise 가 제공하는 특별한 메서드(.then(), .catch(), .finally())를 통해 소비할 수 있다.
Promise는 상태를 가진다.
Promise는 상태(state)를 가진다. 작업을 진행 중인지 (pending) 작업을 성공했는지 (fulfilled) 실패했는지 (rejected)를 나타낸다. ( 이는 객체 내부의 캡슐화된 값이며 속성이 아니다.)
Promise 객체 생성과 resolve, reject 함수
Promise는 생성자 함수인 new를 통해 비동기 작업의 로직을 초기화한다. 프로미스 생성자는 콜백 함수를 인자로 받고, 이 콜백 함수는 resolve와 reject 라는 콜백 함수를 인자로 받는다.
이때 Promise를 생성할 때 넣는 콜백 함수는 Producer 역할을 하며, 해당 비동기 작업이 끝난 뒤 사용하는 then, catch, finally 메소드는 Consumer 역할을 한다.
Producer과 Consumer의 차이
Producer : 데이터 제공
Consumer : 데이터 소비
비동기 작업의 성공과 실패, 그리고 해당 작업을 통해 만들어진 데이터를 어떻게 소비하는지 조금 더 자세히 살펴보자.
생성자 함수의 콜백 함수로 수행할 비동기 작업이 성공적으로 완료되면 resolve 함수를 통해 값을 외부로 전달한다. 만약 실패한다면 reject 함수와 Error 객체를 통해 에러 값을 전달한다.
❗️반대로 말하면 비동기 작업이 완료되는 시점의 정보를 외부로 전달하고 싶다면, Promise 객체를 사용하면 된다는 것!
또한 resolve 와 reject 를 사용해서 비동기 작업이 끝났음을 명시해주지 않으면 계속 pending 상태에 머무른다.
Producer에서 제공하는 데이터는 Counsumers 함수인 then(비동기 작업 성공 시, resolve를 통해)과 catch(비동기 작업 실패 시, reject를 통해)로 데이터를 전달받아 사용할 수 있다. finally 함수는 비동기 작업이 성공적으로 완료되든 그렇지 않든, 무조건 한 번 실행된다.
catch를 통한 에러 핸들링은 다음 블로그 포스팅을 참고하자 => 프로미스 에러 핸들링 보러 가기
Promise 에러 핸들링
yuni-dev.tistory.com
Async
Promise 체이닝은 콜백 지옥을 만들어서 코드를 복잡하게 만든다. 그래서 Promise를 쓰는 대신 함수 앞에 async 키워드를 붙여주면 자동으로 함수의 코드 블럭이 Promise로 바뀐다.
Await
await 키워드를 사용하면 자동으로 비동기 작업이 완료될때까지 기다린 후 결과를 return 한다.
✅ async await 과 promise then 차이
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
async function haveLunch() {
await delay(3000);
return '냠냠'
}
function haveLunch() {
delay(3000)
.then('냠냠');
}
Promise API - Promise.all, Promise.race
Promise.all : 두 개의 비동기 작업이 동시에 일어나도 상관 없는 경우 사용하는 메서드
Promise.race : 여러개의 비동기 작업 중 가장 먼저 완료되는 값만 반환
function examplePromiseAll() {
return Promise.all(([비동기1(), 비동기2()]).then( 이후 수행 작업);
}
'JS' 카테고리의 다른 글
| [모던 자바스크립트 Deep Dive] 프로퍼티 어트리뷰트 (1) | 2024.11.19 |
|---|---|
| [모던 자바스크립트 Deep Dive] 꼭 알아둬야 하는 연산자 종류 (2) | 2024.11.14 |
| [모던 자바스크립트 Deep Dive] JS 런타임 환경이 뭘까? (0) | 2024.10.22 |
