💡새롭게 알게 된 것
프로미스(Promise)
프로미스(Promise)는 JS에서 비동기 처리에 사용되는 객체이다. JS에서 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.
자바스크립트 자체는 비동기를 지원하지 않는다.
자바스크립트 자체는 단일 스레드 언어이지만, 브라우저나 node.js에서 이벤트 루프(event loop)를 지원하기 때문이 이와 같은 비동기 처리가 가능하다.
브라우저에서 지원하는 Web API는 DOM, AJAX, setTimeout등의 비동기 작업등을 수행할 수 있도록 다양한 api들을 지원한다.
프로미스(Promise)는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하게 된다. 서버에서 데이터 전송이 지연될 시 발생하는 오류나 빈화면이 뜨는 것을 방지하기 위한 방법 중 하나이다.
프로미스의 상태(states)
프로미스의 상태는 세가지로 나뉘어 진다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
Pending(대기)
new Promise() 메서드를 호출하면 pending 상태가 되며, 콜백 함수의 인자로 resolve, reject를 받게된다.
const promise = new Promise((resolve, reject) => {
// ...
});Fulfilled(이행)
콜백 함수의 인자인 resolve를 실행하면 이행(Fulfilled) 상태가 되며, then()을 이용하여 값을 받을 수 있게 된다.
const promise = new Promise((resolve, reject) => {
// doing some heavy work (network, read files)
const data = '100';
resolve(data);
});
promise
.then(data => console.log(data))Rejected(실패)
콜백 함수의 또 다른 인자인 reject를 실행하면 실패(Rejected) 상태가 되며, 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다. 예외 처리 상황을 위해 프로미스의 끝에 가급적 catch()를 붙이는 것이 권장된다.
const promise = new Promise((resolve, reject) => {
reject(new Error("Request is failed"));
});
promise
.then
.catch(err =>console.log(err); // Error: Request is failed참고
데브코스 강의
https://zereight.tistory.com/855
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
💭느낀점
함수형 프로그래밍에서 비동기 처리를 위해 promise를 사용하게 되며, promise 객체에 대한 기본개념이 부족하다 생각되어 다시 한번 짚어가며 공부를 하는 시간을 가졌다.😹
