45장 프로미스

45.2 프로미스의 생성

Promise 생성자 함수를 new 연산자와 함게 호출하면 프로미스 객체를 생성한다.

ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다.

const promise = new Promise((resolve, reject) => {

	if( /* 비동기 처리 성공 */){
		resolve('result');
	}else{
		reject('falure reason');
	}
});

 

Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다.

이때 비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다.

생성된 직후의 프로미스는 기본적으로 pending 상태다.

이후 비동기 처리가 수행되면 비동기 처리 결과에 따라 다음과 같이 프로미스 상태가 변경된다.

 

즉, 프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체다.

 

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

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

프로미스의 비동기 처리 상태가 변화하면 후속 처리 베서드에 인수로 전달한 콜백 함수가 선택적으로 호출된다.

 

45.3.1 Promise.prototype.then

then 메서드는 두 개의 콜백 함수를 인수로 전달받는다.

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

new Promise(resolve => resolve('fulfilled')) 
	.then(v => console.log(v), e => console.error(e)); // fulfilled 
    
new Promise((_, reject) => reject(new Error('rejected'))) 
	.then(v => console.log(v), e => console.error(e)); // Error: rejected

 

45.3.2 Promise.prototype.catch

catch 메서드는 한개의 콜백함수를 인수로 전달받는다. catch 메서드의 콜백 함수는 프로미스가 rejected 상태인 경우만 호출된다.

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

 

then 메서드와 마찬가지로 언제나 프로미스를 반환한다.

 

45.3.3 Promise.prototype.finally

finally 메서드의 콜백 함수는 프로미스의 성공(fulfilled) 또는 실패(rejected)와 상관없이 무조건 한번 호출된다.

new Promise(() => {})
	.finally(() => console.log('finally')); //finally

 

then/catch 메서드와 마찬가지로 언제나 프로미스를 반환한다.

 

45.4 프로미스의 에러 처리

promiseGet('<https://www.naver.com>')
.then(res => console.xxx(res))
.catch(err => console.error(err)); // typeerror

 

에러처리는 catch 메서드를 사용하는 것을 권장한다.

 

45.5 프로미스 체이닝

const url = '<https://www.naver.com>';

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

 

then → then → catch 순서로 후속처리 메서드를호출했다.

then, catch, finally 후속 처리메서드는 언제나 프로미스를 반환하므로 연속적으로 호출할수있다. 이를 프로미스 체이닝이라한다.

이것은 즉 콜백패턴, 가독성이 좋지않다. 이문제는 ES8에서 도입된 async/await를 통해 해결할 수 있다.

async/await를 사용하면 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.