Promise의 기본 개념

Promise

자바스크립트는 싱글 스레드로 동작하는 언어(메인 스레드 하나와 콜 스택 하나로 구성되어 있다.)이다. 여기서 스레드는 일꾼이라고 볼 수 있다. 즉 작업을 하나하나 순서대로 처리를 한다. 하지만, 실행환경(런타임)의 도움을 받아 동시 실행을 할 수 있다. (WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작) 하지만 이런식으로 동작하게 되면 콜백 헬이 발생하게 되어 어려움을 겪게 된다.

프로미스 (promise)는 비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다. 프로미스를 사용하면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있다. 비동기 처리 시점을 좀 더 명확하게 표현할 수 있다.

// 프라미스 객체를 만든다
// 인자로는 (resolve, reject) => {} 이런 excutor 실행자(혹은 실행 함수)를 받아온다.
// 이 실행자는 비동기 작업이 끝나면 바로 두 가지 콜백 중 하나를 실행한다.
// resolve: 작업이 성공한 경우 호출할 콜백
// reject: 작업이 실패한 경우 호출할 콜백
const promise = new Promise((resolve, reject) => {
	if(...){
		...
		resolve("성공!");
	}else{
		...
		reject("실패!");
	}
});

프라미스의 상태값

• pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)
• fulfilled: 수행 성공(resolve가 호출된 상태)
• rejected: 수행 실패(reject가 호출된 상태)
• settled: 성공 or 실패(resolve나 reject가 호출된 상태)

프라미스 후속 처리 메서드

프라미스로 구현된 비동기 함수를 호출하는 측에서는 이 프라미스 객체의 후속 처리 메서드를 통해 비동기 처리 결과(성공 결과나 에러 메시지)를 받아서 처리해야 한다.

• .then(성공 시, 실패 시)
  then의 첫 인자는 성공 시 실행, 두 번째 인자는 실패 시 실행된다. (첫 번째 인자만 넘겨도 된다)

let promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("완료!"), 1000);
});

// resolve
promise.then(result => {
	console.log(result); // 완료!
}, error => {
	console.log(error); // 실행되지 않는다.
});​

• .catch(실패 시)

let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류!"), 1000);
});

promise.catch((error) => {console.log(error};);​

promise chaining(프라미스 체이닝)

프라미스는 후속 처리 메서드를 체이닝 해서 여러 개의 프라미스를 연결할 수 있다. 이 방법을 통해 콜백헬을 해결할 수 있다.

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 것.
	console.log(result);
	return "promise 3";
}).then(...);