Promise

• 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용함
• 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁨
• 비동기 처리 중 발생한 에러 처리 곤란
• 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있음

• ES6 에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입함

비동기 처리를 위한 콜백 패턴의 단점 ⇒ 프로미스 도입

• 비동기 함수 : 함수 내부에 비동기로 동작하는 코드를 포함한 함수
• 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다.
• 이유 : 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됨

let todos;

const get = url => {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.send();

	xhr.onload = () => {
		if (xhr.status === 200) {
			todos = JSON.parse(xhr.response);
		} else {
			console.error(`${xhr.status} ${xhr.statusText}`);
		}
	};
};

get('https://jsonplachodler.type.com/posts/1');
console.log(todos); // undefined

• get 함수를 호출하면, GET 요청 전송, onload 이벤트 핸들러 등록한 후 undefined를 반환하고 즉시 종료됨. get함수 자체에서 반환하는 값이 없으므로. onload 이벤트 핸들러는 get 함수가 종료된 이후에 실행됨

원하는 대로 동작하지 않는 이유

• 서버로부터 응답이 도착하면 xhr 객체에서 load 이벤트가 발생함

• 이때, xhr.onload 핸들러 프로퍼티에 바인딩한 이벤트 핸들러가 즉시 실행되는 것이 아니라,
1. load 이벤트 발생
2. 태스크 큐에 저장되어 대기
3. 콜 스택이 비면 이벤트 루프에 의해 콜스택으로 푸시되어 실행됨

• get 함수 이후 console.log가 100번 호출 된다 해도 xhr.onload 이벤트 핸들러는 모든 console.log가 종료된 이후에 실행됨

• 비동기 함수 get이 호출되면 함수 코드를 평가하는 과정에서 get 함수의 실행 컨텍스트가 생성되고 실행 컨텍스트 스택(콜 스택)에 푸시 됨

• get 함수 종료하면 get 함수의 실행 컨텍스트가 콜 스택에서 팝되고, 곧바로 console.log가 호출 됨. 이 때 console.log의 실행 컨텍스트가 생성되어 실행 컨텍스트 스택에 푸시됨

xhr.onload = () => {
	if(xhr.status === 200) {
		successCallback(JSON.parse(xhr.response));
	} else {
		failureCallback(xhr.status);
	}
}	;

에러 처리의 한계

try {
	setTimeout(() => { throw new Error('Error!!'); }, 1000);
} catch (e) {
	console.error('캐치한 에러', e);
}

• 실행 순서
1. 비동기 함수인 setTimeout이 호출되면 setTimeout 함수의 실행 컨텍스트가 생성되어 콜 스택에 푸시되어 실행됨
2. setTimeout은 비동기 함수이므로 콜백 함수가 호출되는 것을 기다리지 않고 즉시 종료, 콜 스택에서 제거됨
3. 이후 타이머가 만료되면 setTimeout 함수의 콜백 함수는 태스크 큐로 푸시되고 콜 스택이 비어졌을 때 이벤트 루프에 의해 콜 스택으로 푸시되어 실행됨

• setTimeout 함수의 콜백 함수가 실행될 때 setTimeout 함수는 이미 콜 스택에서 제거된 상태임 ⇒ setTimeout 함수의 콜백 함수를 호출한 것이 setTimeout 함수가 아니라는 것을 의미
• 콜백 함수의 caller가 setTimeout 함수라면 콜 스택의 현재 실행 중인 실행 컨텍스트가 콜백 함수의 실행 컨텍스트 일 때 현재 실행 중인 실행 컨텍스트의 하위 실행 컨텍스트가 setTimeout 함수여야 함
• 에러는 caller 방향으로 전파됨 ⇒ setTimeout 함수로 전파되지 않아서, catch에서 잡을 수 없음

프로미스

프로미스의 생성

const promise = new Promise((resolve, reject) => {
	// Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다.
	if ( /* 비동기 처리 성공 */) {
		resolve('result');
	} else /* 비동기 처리 실패 */ {
		reject('failure reason');
	}
});

const promiseGet = url => {
	return new Promise((resolve, reject) => {
		const xhr = new XMLHttpRequest();
		xhr.open('GET', url);
		xhr.send();
	
		xhr.onload = () => {
			if (xhr.status === 200) {
				resolve(JSON.parse(xhr.response));
			} else {
				reject(new Error(xhr.status));
			}
		};
	});
};
get('https://jsonplachodler.type.com/posts/1');
console.log(todos); // undefined

프로미스 상태 정보

• fulfilled , rejected 상태를 합쳐서 settled 상태라고 함(pending이 아닌 상태로, 비동기 처리가 수행된 상태)

프로미스의 후속 처리 메서드

• 프로미스의 비동기 처리 상태가 변화하면 이에 따른 후속 처리를 해야 함

• 예를 들어, fulfilled 상태가 되면 프로미스의 처리 결과를 가지고 무언가를 해야 하고, rejected 상태가 되면 프로미스의 처리 결과(에러)를 가지고 에러 처리를 해야 함 ⇒ then, catch, finally 를 제공

• 프로미스의 비동기 처리 상태가 변화하면 후속 처리 메서드에 인수로 전달한 콜백 함수가 선택적으로 호출됨(콜백 함수에 프로미스의 처리 결과가 argument로 전달됨)

• 모든 후속 처리 메서드는 프로미스를 반환하며, 비동기로 동작함

Promise.prototype.then

• then 메서드는 두 개의 콜백 함수를 인수로 전달받음
• 첫 번째 콜백 함수는 프로미스가 fulfilled 상태(resolve 함수가 호출된 상태)가 되면 호출된다. 이 때 콜백 함수는 프로미스의 비동기 처리 결과를 인수로 전달받는다
• 두 번째 콜백 함수는 프로미스가 rejected 상태(reject 함수가 호출된 상태)가 되면 호출된다. 이 때 콜백 함수는 프로미스의 에러를 인수로 전달받는다.

• then 메서드는 언제나 프로미스를 반환함
• then 메서드의 콜백 함수가 프로미스를 반환하면 그대로 반환하고, 아니라면 그 값을 암묵적으로 resolve 또는 reject 하여 프로미스를 생성해 반환함

Promise.prototype.catch

• 한 개의 콜백 함수를 인수로 전달 받음

• 해당 콜백함수는 프로미스가 rejected 인 상태에서 호출됨

• catch 메서드는 then(undefined, onRejected)와 동일하게 동작함

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
	.catch(e => console.log(e));

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
	.then(undefined, e => console.log(e));

Promise.prototype.finally

• 한 개의 콜백함수를 인수로 받음

• 프로미스의 성공, 실패와 상관없이 무조건 한번 호출됨

promiseGet('~~~~')
	.then(res => console.log(res))
	.catch(err => console.log(err))
	.finally(() => console.log('Bye!'));

프로미스 체이닝

• 비동기 처리를 위한 콜백 패턴은 콜백 헬이 발생하는 문제가 있다. 프로미스는 then, catch, finally 후속 처리 메서드를 통해 콜백 헬을 해결함

• 다만 프로미스도 콜백 패턴을 사용하므로 콜백 함수를 사용하지 않는 것은 아님

• 콜백 패턴은 가독성이 좋지 않다. 이 문제는 ES8에서 도입된 async/await 를 통해 해결할 수 있음
• async/await를 사용하면 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있음
• async/await 도 프로미스를 기반으로 동작 하므로 프로미스는 잘 이해하고 있어야 함

get(`${url}/posts/1`, ( {userId} ) => {
	console.log(userId);
	get(`${url}/users/${userId}`, userInfo => {
		console.log(userInfo);
	});
});

promiseGet(`${url}/posts/1`)
	.then(({userId}) => promiseGet(`${url}/users/${userId}`))
	.then(userInfo => console.log(userInfo)
	.catch(err => console.error(err));

const url = 'https://jsonplaceholder.typicode.com';

(async () => {
		const { userId } = await promiseGet(`${url}/posts/1`);

		const userInfo = await promiseGet(`${url}/users/${userId}`);

		console.log(userInfo);
})();

프로미스의 정적 메서드

Promise.resolve / Promise.reject

• 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용함

const resolvedPromise = Promise.resolve([1, 2, 3]);
resolvedPromise.then(console.log); // [ 1, 2, 3 ]

const rejectPromise = Promise.reject(new Error('Error!'));
rejectPromise.catch(console.log); // Error: Error!

Promise.all

• Promise.all 메서드는 여러 개의 비동기 처리를 모두 병렬(parallel) 처리할 때 하게 실행할 때 사용함

const requestData1 = () => {
	new Promise(resolve => setTimeout(() => resolve(1), 3000));

const requestData2 = () => {
	new Promise(resolve => setTimeout(() => resolve(2), 2000));

const requestData3 = () => {
	new Promise(resolve => setTimeout(() => resolve(3), 1000));

// 세 개의 비동기 처리를 순차적으로 처리
const res = [];
requestData1()
	.then(data => {
		res.push(data);
		return requestData2();
	})
	.then(data => {
		res.push(data);
		return requestData3();
	})
	.then(data => {
		res.push(data);
		console.log(res); // [1, 2, 3] 약 6초 소요
	})
	.catch(console.error);

• 위 예제는 세 개의 비동기 처리를 순차적으로 처리함

• 그런데 각각의 비동기 처리는 서로 의존하지 않고 개별적으로 수행되기에 순차적으로 처리될 필요 없음

Promise.all([requestData1(), requestData2(), requestData3()])
	.then(console.log) // [ 1, 2, 3] => 약 3초 소요
	.catch(console.error);

• Promise.all 메서드는 인수로 전달받은 배열의 모든 프로미스가 모두 fulfilled 상태가 되면 종료함 ⇒ 가장 늦게 fulfilled 되는 Promise의 소요시간이 총 걸리는 시간이 됨

• 모든 프로미스가 fulfilled 상태가 되면 resolve된 처리 결과를 모두 배열에 저장해 새로운 프로미스를 반환함

• 첫 번째 프로미스가 가장 나중에 fulfilled 상태가 되어도 첫 번째 프로미스가 resolve한 처리 결과부터 차례대로 배열에 저장해 그 배열을 resolve 하는 새로운 프로미스를 반환함 ⇒ 처리 순서 보장

• 배열의 프로미스가 하나라도 rejected 상태가 되면 나머지 프로미스가 fulfilled 상태가 되기까지 기다리지 않고 즉시 종료함

Promise.race

• Promise.all 메서드와 동일하게 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받음

• Promise.race 메서드는 모든 프로미스가 fulfilled 상태가 되는 것을 기다리는 것이 아니라 가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve 하는 새로운 프로미스를 반환함

Promise.allSettled

• 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달받음

• 전달받은 프로미스를 모두 settled 상태(fulfilled 또는 rejected 상태)가 되면 처리 결과를 배열로 반환함

Promise.allSettled([
	new Promise(resolve => setTimeout(() => resolve(1), 2000)),
	new Promise((_, reject) => setTimeout(() => reject(new Error('error!')), 1000))
]).then(console.log);

/*
[
	{status : "fulfilled", value: 1},
	{status : "rejected", reason: Error : ~~}
]
*/

마이크로 태스크 큐

setTimeout(() => console.log(1), 0);

Promise.resolve()
	.then(() => console.log(2))
	.then(() => console.log(3));

• 1→ 2→ 3 순으로 출력될 것처럼 보이지만, 2→ 3→ 1 의 순서로 출력됨

• 그 이유는 프로미스의 후속 처리 메서드의 콜백함수는 태스크 큐가 아닌 마이크로 태스크 큐에 저장되기 때문

• 마이크로태스크 큐에는 프로미스의 후속 처리 메서드의 콜백 함수가 일시 저장됨. 그 외의 비동기 함수의 콜백 함수나 이벤트 핸들러는 태스크 큐에 일시 저장됨

• 마이크로 태스크 큐와 태스크 큐가 콜백 함수, 이벤트 핸들러를 일시 저장한다는 점에서는 동일하지만, 마이크로 태스크 큐가 태스크 큐보다 우선순위가 높음
• 이벤트 루프가 콜 스택이 비면 마이크로 태스크 큐에서 대기하고 있는 함수를 가져와 실행함. 그 후 태스크 큐에서 대기하고 있는 함수를 가져와 실행함