javascript Promise 알아보기

# Promise 란?

• promise 의 어원 ‘약속하다’

• javascript 의 Promise 객체는 비동기 연산을 수행하고 연산이 종료되면 결과를 알려주기 위해 사용합니다. (비동기 연산 결과를 알려주겠다고 약속하는 것)

• Promise 는 ES6 에 추가 된 객체이며, ES6 를 지원하지 않는 구형 브라우저에서 사용하려면 polyfill 을 해야 합니다.

• Promise.prototype.finally / Promise.any 등... Promise 객체에 유용한 메소드 제안 및 추가가 활발히 진행되고 있습니다. (Github tc39 - proposal 참고)

 

# Promise 상태종류 & 사용 코드

• Promise 객체는 총 3가지 상태 중에 하나를 가집니다.

  • 대기(pending): 아직 작업이 완료되지 않은 상태 또는 초기 상태

  • 이행(fulfilled): 작업이 성공적으로 완료된 상태

  • 거부(rejected): 작업 수행 중, 어떠한 요인으로 인해 실패한 상태

• 작업이 성공적으로 완료되면 Promise.resolve() 메소드를 통해 결과 값으로 이행하는 Promise 객체를 반환합니다.

• 작업이 실패(에러) 되면 Promise.reject() 메소드를 통해 거부하는 Promise 객체를 반환합니다.

• Promise.prototype.then() / Promise.prototype.catch() 메소드는 arguments 로 콜백함수를 받는데, 이 콜백함수를 통해 이행 / 거부 결과를 확인할 수 있습니다. 

• Promise.prototype.finally() 는 이행 / 거부 결과에 상관없이 무조건 한번 실행되는 메소드

  • .finally() 메소드는 현재 TC39 proposal stage - 4 단계로 아직 ECMA-262 표준에 등재된 API 는 아닙니다.
  • 그러므로 .finally() 메소드를 사용하려면 polyfill 을 해줘야 합니다.

• Promise 이행 / 거부 결과 확인을 위한  코드 예

function fetchData() {
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			/* resolve / reject 주석을 풀어가며 결과 확인해보기 */
			resolve("success!");
			// reject("fail!");
		}, 2000);
	});
}

const getData = function() {
	let isLoading = true;

	/* 1. catch 를 체이닝 형태로 사용한 코드 */
	fetchData()
	.then(function(result) {
		console.log("promise then: ", result);
	})
	.catch(function(error) {
		console.error("promise catch: ", error);
	})
	.finally(function() {
		console.log("promise finally");
		isLoading = false;
	});

    /* 2. catch 를 then() 콜백 형태로 사용한 코드 */
    // fetchData()
    // .then(function(result) {
    //     console.log("promise then: ", result);
    // }, function(error) {
    //     console.error("promise catch: ", error);
    // })
    // .finally(function() {
    //     console.log("promise finally");
    //     isLoading = false;
    // });
};

getData();

 

• Promise 처리과정을 보여주는 이미지

이미지 출처: Promise - MDN web docs (링크 본문 하단 참고)

 

 

# Promise 사용하는 경우

• Ajax 기반 http 통신을 하는 함수 (브라우저 fetch() 함수는 결과값으로 Promise 객체를 반환)

• ... 또 어떤게 있을까요?

 

 

 

# [번외] 다음 코드의 실행 결과는 어떻게 될까??

• Hint: javascript 의 Micro Task Queue / Task Queue 에 적재 된 작업이 처리되는 순서 알아보기

setTimeout(function() {
    console.log("1");
}, 0);

Promise.resolve().then(function() {
    console.log("2");
});

console.log("3");

 

 

 

# 참고문서

• Promise - MDN web docs

Promise

 

 

# 잘못된 내용은 댓글 남겨주세요.

저작자표시비영리동일조건

'프론트엔드 > javascript' 카테고리의 다른 글

javascript Spread 문법  (0)	2020.06.05
javascript async & await 알아보기  (0)	2020.05.30
javascript Promise 알아보기  (0)	2020.05.29
ECMAScript2015(ES6) 알아보기  (0)	2020.05.23
[js Q&A] ES6 class 에서 method bind 를 해야하는 이유 답변  (0)	2020.05.11
[js Q&A] var 와 let 차이점 답변  (0)	2020.02.11