[ JavaScript / Promise ] 자바스크립트의 Promise에 대하여

 

자바스크립트는 싱글 스레드 방식으로 동작하는 언어이기 때문에 동기 방식으로 태스크를 처리한다.

그래서 비동기 방식으로 처리를 하려면 과거에는 주로 콜백 패턴을 사용했는데, 콜백 패턴은 콜백 헬로 인해 가독성이 좋지 않고 에러 처리 및 여러 개의 비동기 처리를 한번에 하기도 힘들다는 단점이 있기 때문에 ES6에서 도입된 Promise를 이용하면 이러한 단점들을 보완하며 비동기 처리를 가능하게 한다.

 

 

 

 

비동기 함수란?

작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술로 작업이 완료되면 프로그램이 결과를 제공한다. 이 때문에 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결괴를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는 것을 확인할 수 있다.

 

 

 

 

 

Promise 

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체로, 기본적으로 함수에 콜백을 전달하는 대신에 콜백을 첨부하는 방식의 객체이다. 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있으며, 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있다. 이 때 최종 결과를 반환하는 것이 아니라, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'을 반환한다. 수행한 비동기 작업이 성공한 경우에는 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출한다.

 

 

 

 

 

 

Promise 상태

프로미스 상태	뜻	상태 변경 조건
pending(대기)	비동기 처리가 아직 수행되지 않은 초기 상태.	프로미스가 생성된 직후 초기 상태.
fulfilled(이행)	비동기 처리가 수행된 상태.(성공적으로 완료)	resolve 함수 호출
rejected(거부)	비동기 처리가 실패한 상태.	reject 함수 호출

 

MDN - Promise

 

 

 

 

Promise 예제 코드

// 프로미스 생성
const myPromise = new Promise((resolve, reject) => {
	// 수행한 비동기 작업이 성공한 경우에는 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출한다.
	if(success) {
		resolve('result');
    } else {
    	reject('실패 이유');
    }
});

 

 

 

 

 

Promise 인스턴스 메서드

- Promise.prototype.catch() : 거부(rejected) 처리 콜백을 인수로 전달받으며 언제나 프로미스를 반환한다.

 

- Promise.prototype.then() : 이행(fulfilled)과 거부(rejected) 처리 콜백을 인수로 전달받고, 상태에 따라 첫 번째(성공) 또는 두 번째(실패) 콜백 함수를 호출한다. 해당 메서드는 언제나 프로미스를 반환한다.

  

- Promise.prototype.finally() : 프로미스의 행(fulfilled)과 거부(rejected) 여부에 상관없이 무조건 한 번 호출된다. 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리가 있을때 유용하며, 마찬가지로 언제나 프로미스를 반환한다.

  

 

 

 

 

---

 

🌸 출처 🌸

 

Promise - MDN

Using Promise - MDN

Asynchronous JavaScript - MDN