Promise

1) 동기와 비동기

 

- 동기

하나 하나씩 처리되는 방식. 요청을 보내고 응답을 받은 후에 다음 일을 시작하는 방식.

 

- 비동기

어떤 작업을 요청을 보낸 다음 그 작업을 다했다는 응답을 받을 때까지 기다리지 않고 바로 다음 일을 시작하는 방식

서버 등에서 데이터를 받아오는 등 시간이 필요한 작업을 해야한다면 응답을 받기까지 계속 기다릴 수 없기 때문에 비동기 처리를 한다.

 

2) 콜백이란?

callback은 특정 함수에 매개변수로 전달된 함수이다.

A()가 B()를 콜백으로 받았다면 A()안에서 B를 실행할 수 있다.

 

콜백 패턴은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나이다.

전통적인 콜백 패턴은 일명 콜백 헬로 불리는 엄청난 중첩 문제가 생기기 쉽다.

 

1.콜백 헬

비동기 처리가 늘어나면 호출이 계속 중첩되고, 코드가 깊어지고, 관리는 어려워 진다.

이런 깊은 중첩을 콜백 헬이나 명망의 피라미드라고 부른다.

function async1('a', function (err, async2){
	if(err){
		errHandler(err);
	}else{
		...
		async2('b', function (err, async3){
			...
		}){
			...
		}
	}
});

콜백 헬이 발생하는 이유

- 비동기 처리 시에는 실행 완료를 기다리지 않고 바로 다음 작업을 실행한다.

- 즉, 순서대로 코드를 쭉 적는다고 원하는 순서로 작업이 이루어지지 않는다.

- 비동기 처리 함수 내에서 처리 결과를 반환하는 걸로는 원하는 동작을 하지 않으니, 콜백 함수를 사용해 원하는 동작을 하게 하려고 콜백 함수를 씁니다.

이 콜백 함수 내에서 또 다른 비동기 작업이 필요할 경우 위와 같은 중첩이 생기면서 콜백 헬이 생긴다.

 

3) 프라미스란?

비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다.

프라미스를 쓰면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있다.

전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴이다.

비동기 처리 시점을 좀 더 명확하게 표현할 수 있다.

 

1.프라미스 생성

프라미스는 Promise 생성자 함수(new 키워드)를 통해 생성한다.

비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용한다.

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

 

2. 프라미스의 상태값

pending: 비동기 처리 수행 전(resolve, reject가 아직 호출되지 않음)

fulfilled: 수행 성공(resolve가 호출된 상태)

rejected: 수행 실패(reject가 호출된 상태)

settled:성공 or 실패(resolve나 reject가 호출된 상태)

 

3. 프라미스 후속 처리 메서드

프라미스로 구현된 비동기 함수는 프라미스 객체를 반환한다.

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

 

.then(성공 시, 실패 시)

then의 첫 인자는 성공 시 실행, 두번 째 인자는 실패 시 실행된다.

(첫 번째 인자만 넘겨도 된다.)

// 프라미스 만들기
let promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("완료!"), 1000);
});

// resolve
promise.then(result => {
	console.log(result); // 완료!가 콘솔에 찍힌다.
}, error => {
	console.log(error); // 실행되지 않는다.
});

// 프라미스 만들기
let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류!")), 1000);
});

// reject
promise.then(result => {
	console.log(result); // 실행되지 않는다.
}, error => {
	console.log(error); // Error: 오류!가 찍힌다.
});

.catch(실패 시)

// 프라미스 만들기
let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류!"), 1000);
});

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

4) promise chaining(프라미스 체이닝)

1. 프라미스는 후속 처리 메서드를 체이닝해서 여러 개의 프라미스를 연결할 수 있다.(이것으로 콜백 헬을 해결할 수 있다.)

- 체이닝이란 후속 처리 메서드(then)을 이어주는 것이다.

-프라미스를 리턴해 주는 것이 아니라면 진짜 정확하게 비동기 처리 하는 것은 web api에게 요청할 만한 것은 처음 하나의 핸들러에만 여러개 담긴 것이다.

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