Promise

📖 Promise 

 

자바스크립트는 싱글 쓰레드로 동작하는 언어다.

쓰레드 ? 작업을 하는 일꾼 

싱글 쓰레드 ? 일꾼이 하나뿐.

작업 하나를 하고, 그 다음꺼를 한다.

즉 , 동시작업이 불가하다.

그런데 자바스크립트는 비동기 작업을 동시에 할 수 있다.

실행환경(런타임)의 도움을 받아 동시 실행을 할 수 있는 것.

 

비동기 요청이 들어오면, 콜스택에 쌓인다. (setTimeout)

web API에게 위임을 한다.

 

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

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

📖 콜백 헬

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

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

 

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

• 비동기 처리 시에는 실행 완료를 기다리지 않고 바로 다음 작업을 실행한다.
• 즉, 순서대로 코드를 쭉 적는다고 우리가 원하는 순서로 작업이 이뤄지지 않는다.
• 비동기 처리 함수 내에서 처리 결과를 반환하는 걸로는 원하는 동작을 하지 않으니, 콜백 함수를 사용해 원하는 동작을 하게 하려고 콜백 함수를 쓴다.
• 이 콜백 함수 내에서 또 다른 비동기 작업이 필요할 경우 위와 같은 중첩이 생기면서 콜백 헬이 탄생한다. 

📖  프라미스란?

 

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

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

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

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

 

1. 프라미스 생성

• 프라미스는 Promise 생성자 함수(new)를 통해 생성한다.
• 비동기 작업을 수행할 콜백 함수를 인자로 전달받아서 사용한다.

2. 프라미스 상태값

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

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

• 프라미스로 구현된 비동기 함수는 프라미스 객체를 반환
• 프라미스로 구현된 비동기 함수를 호출하는 측에서는 이 프라미스 객체의 후속 처리 메서드를 통해 비동기 처리 결과(성공 결과나 에러메시지)를 받아서 처리해야 한다.
• .then(성공 시, 실패 시)
• then의 첫 인자는 성공 시 실행, 두번째 인자는 실패 시 실행된다. (첫 번째 인자만 넘겨도 된다.)

// 프라미스를 하나 만들어 봅시다!
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};);

 .then 으로 프라미스를 연결할 수 있다..

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

 🤔 👉 프라미스는 후속 처리 메서드를 체이닝 해서 여러 개의 프라미스를 연결할 수 있다.

 

📖  async, await

 🤔 👉 프라미스 사용을 엄청 편하게 만들어 준다.

1. async

항상 함수 앞에 async를 붙여서 사용한다.

항상 프라미스를 반환한다. (프라미스가 아닌 값이라도, 프라미스로 감싸서 반환해준다.)

2. await

async의 짝꿍

async 함수 안에서만 동작한다. 

await는 프라미스가 처리될 때 까지 기다렸다가 그 이후에 결과를 반환한다.

즉, await를 사용하면 함수 실행을 기다리게 하는 것으로 이해하면 쉽다.  🥲