[JavaScript] Promise

Sang Young Ha·2022년 1월 1일

What is the Promise?

  • Promise는 객체이며 비동기 처리에 있어 사용되는데, 통신한 데이터를 화면에 띄울 때 주로 사용 된다.

States of the Promise.

  • promise 는 new Promise() 로 생성할 수 있으며, 생성 이후 종료까지 3가지 state 을 소유하게 된다.

1) Pending : 비동기 처리 로직이 완료되지 않아 대기중인 상태.

  • new Promise() 를 사용하여 promise 를 생성 했을때, 주로 콜백 함수를 같이 선언 해 준다.
new Promise( function(resolve, reject) {
...
});
  • 콜백 함수는 위와 같이 resolve 와 reject 를 인자로 가진다.

2) Fulfilled : 비동기 처리 로직이 완료되어 Promise가 결과 값을 return 해준 상태.

  • 이행이란 콜백 함수의 인자인 resolve 를 실행했을때 promise 가 fulfilled 가 된다.
new Promise( function(resolve, reject) {
	resolve();
});
  • fulfilled state 이 되면 then() 을 사용하여 promise 처리 결과 값을 받을 수 있다.
function fetchData() {
	return new Promise( function(resolve, reject) {
    var data = "데이터 입니다";
	resolve(data);
});
}

fetchData().then(function(resolvedData) {
	console.log(resolvedData);
});

3) Rejected : 비동기 처리 로직이 실패 또는 오류가 발생 한 상태.

  • resolve 와 같이, reject 를 사용하면 rejected state 가 된다.
new Promise( function(resolve, reject) {
	reject();
});
  • rejected state 에서, catch() 를 통해 실패 처리의 결과 값을 받을 수 있다.
function fetchData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("요청 실패"));
  });
}

// reject()의 결과 값을 err로 수신
fetchData().then().catch(function(err) {
  console.log(err); // Error: 요청 실패
});

0개의 댓글