[TIL] JavaScript - Promise

홍효정·2021년 6월 10일

TIL

목록 보기

39/40

Promise란?

promise란, 비동기 처리를 할때 콜백함수 대신 사용되는 객체입니다. promise 생성자 함수를 통해 생성합니다. 주로 서버와 네트워크 통신으로 데이터를 받아올 때 사용하며 콜백함수와 달리 에러처리가 가능합니다.

Promise의 상태(states)

promise는 new Promise()로 생성하고 종료될 때까지 3가지 상태를 갖습니다.

Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending (대기)

new Promise(function(resolve, reject) {
	console.log("Promise");
});

위와 같이 new Promise() 로 promise 객체를 생성하고 호출하면 대기 상태가 됩니다.

콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject입니다.

proimse 호출 시 콜백함수가 바로 실행되기 때문에 주의해야 합니다.

Fulfilled (이행)

new Promise(function(resolve, reject) {
	console.log("Promise");
	resolve("hi"); // 성공 then의 인자로 전달
});

promise.then(value => {
	console.log(value); // hi
});

콜백함수의 인자 resolve를 위와 같이 실행하면 이행 (fulfilled) 상태가 됩니다.

그리고 이행 상태가 되면 아래와 같이 .then()을 이용하여 처리 결과 값을 받을 수 있습니다.

※ promise의 '이행' 상태를 좀 다르게 표현해보면 '완료'입니다.

Rejected (실패)

new Promise(function(resolve, reject) {
	console.log("Promise");
	resolve("hi"); // 성공 then의 매개변수로 전달
	reject(new Error("No network")); // 실패 Error object를 전달
});

promise
	.then(value => {
		console.log(value); // hi
	})
	.catch(error => {
		console.log(error); // No network
	})
	.finally(() => {
		console.log("finally");
	});

new Promise()로 promise 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했습니다. 여기서 reject를 위와 같이 호출하면 실패 (Rejected) 상태가 됩니다.

그리고, 실패 상태가 되면 실패 처리의 결과 값을 .catch()로 받을 수 있습니다.

.finally()의 경우 성공과 실패와 관계없이 마지막에 실행합니다.

여러개의 promise 연결하기 (Promise chaining)

const fetchNumber = new Promise(function(resolve, reject){
  setTimeout(() => resolve(1), 2000);
})

fetchNumber
	.then((result) => {
	  console.log(result); // 1
	  return result + 10;
	})
	.then((result) => {
	  console.log(result); // 11
	  return result + 20;
	})
	.then((result) => {
	  console.log(result); // 31
	});